jQuery 动画和切换

Question

我在尝试实现 slideToggle 事件并同时实现动画功能时遇到了困难。

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

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

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

我不知道如何或在何处放置动画功能以将 .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;
});