jQuery Animate和Toggle

Question

我正在努力实现一个slideToggle事件，同时实现一个动画功能。

例如，当用户点击按钮时，我希望按钮向上移动，然后显示下面的div。但是当再次点击按钮时，我希望按钮返回原始空间并让div消失。

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

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

我不知道如何放置animate功能以将.search按钮返回到其原始位置。

Answer 1

使用回调函数

$('.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;
});