如何等待一个jquery动画在下一个开始之前完成？

我有以下jQuery：

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300 ); $("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200); 

我的问题是两者都发生在同一时间。 我想在第一个完成时启动div2动画。 我尝试了下面的方法，但它做了同样的事情：

 $("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, ShowDiv() ); .... function ShowDiv(){ $("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200); } 

如何让它等待第一个完成？

Answer 1

http://api.jquery.com/animate/

animate具有“完整”function。 您应该将第二个动画放在第一个动画的完整function中。

编辑：示例http://jsfiddle.net/xgJns/

 $("#div1").animate({opacity:.1},1000,function(){ $("#div2").animate({opacity:.1},1000); });​ 

Answer 2

 $(function(){ $("#div1").animate({ width: '200' }, 2000).animate({ width: 'toggle' }, 3000, function(){ $("#div2").animate({ width: 'toggle' }, 3000).animate({ width: '150' }, 2000); }); }); 

http://jsfiddle.net/joaquinrivero/TWA24/2/embedded/result/

Answer 3

您可以将函数作为参数传递给动画完成后调用的animate(..)函数。 像这样：

 $('#div1').animate({ width: 160 }, 200, function() { // Handle completion of this animation }); 

以下示例是对参数的更清晰的解释。

 var options = { }, duration = 200, handler = function() { alert('Done animating'); }; $('#id-of-element').animate(options, duration, handler); 

Answer 4

遵循kingjiv所说的，你应该使用complete回调链接这些动画。 在第二个示例中几乎已经有了它，除非您通过括号跟随它立即执行ShowDiv回调。 将它设置为ShowDiv而不是ShowDiv() ，它应该工作。

mcgrailm的回复（在我写这篇文章时发布）实际上是相同的，只是使用匿名函数进行回调。

Answer 5

不要使用超时，使用完整的回调。

 $("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, function(){ $("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200); }); 

Answer 6

 $("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, function () { $("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200); }); 

这对我有用。 我不确定为什么你的原始代码不起作用。 也许需要在匿名函数中加入？