Jquery排队动画

我想要在dom中的不同对象上执行几个动画。

我希望它们按顺序发生。

我不想这样做：

$('#first').show(800, function () { $('#second').show(800, function () {...etc...}); 

我想将所有动画（和cpu密集型函数）添加到某种队列对象中，以确保它们按顺序执行。

Answer 1

我不确定你为什么不想使用你描述的方法。 如果纯粹从组织的角度来看，您不必使用匿名函数

 function showFirst() { $('#first').show(800, showSecond); } function showSecond() { $('#second').show(800, showThird); } function showThird() { $('#third').show(800); } function startAnimation() { showFirst(); } 

Answer 2

查看jQuery Effects的文档 。 关于排队的事情应该做你需要的。

Answer 3

我刚刚使用这个插件http://plugins.jquery.com/project/timers ，前几天做了类似的事情。 您基本上遍历所有匹配的dom元素，然后在索引*您的毫秒计数时执行每个动画。

代码是这样的：

HTML：

 
 
These
 
Show
 
In
 
Order
  

jQuery的

 $("#wrapper div").foreach( function(i) { i = i + 1; $(this).oneTime(800 * i, "show", function() { $(this).show(); }); }); 

Answer 4

这也行得通。

  $('#first').show(800); setTimeout("$('#second').show(800)", 800); setTimeout("$('#third').show(800)", 1600); setTimeout("$('#forth').show(800)", 2400); 

我知道它不是纯粹的顺序，但我发现它使它易于阅读，并允许您以更灵活的方式设置动画。

注意：您必须引用要执行的代码。 我没有在前面的代码中使用任何双引号，但如果你这样做，你将按如下方式转义它们。

  $('#first').animate({"width":"100px"}, 500); setTimeout("$('#second').animate({\"width\":\"100px\"}, 500)", 800); setTimeout("$('#third').animate({\"width\":\"100px\"}, 500)", 1600); setTimeout("$('#forth').animate({\"width\":\"100px\"}, 500)", 2400); 

您通常可以通过交替使用哪些引号来避免这种情况，但值得一提。

更新：这是另一种选择，这里也值得查看jquery promises

  $('#first').show(800); $('#second').delay(800).show(800); $('#third').delay(1600).show(800); $('#forth').delay(2400).show(800);