Question

I’m having a tough time trying to implement a slideToggle event and at the same time implementing an animate feature.

For example, when a user clicks on a button, I’d like the button to move up and then have the div below appear. But when the button is clicked again, I’d like the button to go back to the original space and have the div disappear.

$(function() {
    $('.search').click(function() {
    $(this).animate({
        top: '10px'
    },'slow');

    $('.searchbox').slideToggle('slow');
    return false;
    });
}); 

I don’t know how or where to put the animate feature to return the .search button back to its original position.

Answer 1

use the callback function

$('.search').toggle(function() {
    $(this).animate({
        top: '10px'
    },'slow',function(){
        $('.searchbox').slideToggle('slow');
    });
    return false;
},function() {
    $(this).animate({
        top: '0px' /*or original value*/
    },'slow',function(){
        $('.searchbox').slideToggle('slow');
    });
    return false;
});