如何在另一个完全完成后启动一个jQuery动画

Question

我有几种情况需要为元素设置动画,比如将其移动到左侧,或者将其淡入,但只有在初始动画完成100%之后.

就像说,当我点击搜索图标时,我有一个从页面顶部滑出的搜索抽屉.这很简单:

$('.search-toggle').on('click', function(){
   $('.search-drawer').slideToggle(); // or fadeIn(), show() ect..
});

但是,如果喜欢,我点击页面底部的搜索切换,我需要在显示搜索抽屉之前向上滚动到顶部？我试过这样的事情:

$('.search-toggle').on('click', function(){
   $('html, body').animate({ scrollTop: 0 }, "slow").find('.search-drawer').slideToggle(); // or fadeIn(), show() ect..
});

但这两个动画同时运行.我尝试过使用延迟,但这似乎不起作用,当顶部链接点击而不是底部时,可能会导致明显的延迟.

也就是说,我也试图运行一个动画,当你点击一个元素时,我希望它像330px一样向左移动然后,当它到达那个位置后,另一个元素会滑入或者我会有第二个元素首先滑入,然后第一个元素会做一些事情.关键是,如何在开始另一个动画之前完成动画制作.

所以对于我的第二个例子,我看到动画回调并不真正起作用.我有另一个动画:

 $first.animate( {
     left : "-=660"
    }, 
    300, 
    function(){
      $second.animate({ left: '-='+startPosition });
    }
 }

所以在这个例子中,理论上第一个$ first会向左移动660个像素,那么$ second会向左移动X个数量吗？它没有,它们看起来像是同时移动.或者更确切地说,$ second在$ first之前开始制作动画.

Answer 1

您需要更改您的功能,以便等待第一个动画完成:

$('.search-toggle').on('click', function(){
    $("body").animate({ scrollTop: 0 }, "slow", function(){
        $('.search-drawer').slideToggle(); // or fadeIn(), show() ect..
    });
});