11

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

我希望它们按顺序发生。

我不想这样做：

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

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

4

4 回答 4

9

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

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

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

function showThird() {
  $('#third').show(800);
}

function startAnimation() {
  showFirst();
}
于 2009-03-20T21:42:30.940 回答
2

查看 jQuery 效果的文档。关于排队的东西应该做你需要的。

于 2009-03-20T21:47:53.797 回答
2

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

代码是这样的：

HTML：

<div id="wrapper">
   <div>These</div>
   <div>Show</div>
   <div>In</div>
   <div>Order</div>
</div>

jQuery

$("#wrapper div").foreach( function(i) {
    i = i + 1;
    $(this).oneTime(800 * i, "show", function()  {
        $(this).show();
    });
});
于 2009-03-21T05:00:20.060 回答
-2

这也行。

            $('#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 承诺

            $('#first').show(800);
            $('#second').delay(800).show(800);
            $('#third').delay(1600).show(800);
            $('#forth').delay(2400).show(800);
于 2012-06-04T13:55:52.757 回答