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

我有几种情况需要为元素设置动画，比如将其移动到左侧，或者将其淡入，但只有在初始动画完成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

您需要更改您的function，以便等待第一个动画完成：

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