Question

我正在尝试找出如何使用jQuery在多个元素上排队动画。

例如，我需要在屏幕上移动元素。然后，当完成后，移动下一个，等等。

这可能是一个项目列表......一个接一个地落实到位。

有人可以帮帮我吗？

我是否需要使用每个动画的onComplete函数来启动下一个动画？

更新：简单的例子。

<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ul>

我想让他们每个人一个接一个地消失。 SO项目1淡入。然后当完成时，项目2淡入等等。

我正在使用jQuery将一些Flash“页面构建”类型的动画转换为HTML。所以我需要在多个元素上排队动画。就像制作一个盒子一样，并将一些文字滑到它上面......等等。

Answer 1

如果您知道对其他元素的影响持续时间，则可以为每个元素添加延迟。

假设你想逐个淡出一些div，每次淡出需要800ms，然后，你可以立即启动第一个，第二个延迟800ms（所以当另一个结束时启动），第三个延迟1600毫秒等等......

您可以使用firebug或webkit控制台执行此操作的自动示例（喜欢您的示例构思jAndy！= D）：

$('div.nav li').each(function(i, elem) {
    $(elem).delay(i * 800).fadeOut(800);
});

（在导航链接上执行它：问题，标签，用户......）

Answer 2

保罗·爱尔兰写了一篇关于这个主题的精彩文章：

http://paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/

对于您的淡入示例，您可以执行以下操作：

(function showNext(jq){
jq.eq(0).fadeIn("fast", function(){
    (jq=jq.slice(1)).length && showNext(jq);
});
})($('ul > li'))

调整味道。

Answer 3

实际上所有jQuerys fx methods（包括.animate()）都提供了complete callback。那是在动画完成后你需要执行一些非fx 的东西。

如果你只是想按顺序执行不同的fx效果，那么链接方法就足够了

$('object').fadeOut(3000).slideDown(2500).slideUp(1500);

jQuery会自动在这个位置照顾你。这被转换为像

这样的调用

$('object').fadeOut(3000, function() {
    // do something here
    $(this).slideDown(2500, function() {
        // do something here
        $(this).slideUp(1500, function() {
           // do something here
        });
    });
});

<强>更新

在参考您的评论时，请将其输入您的firebug或webkit控制台：

 $('div').slice(4, 9).fadeOut(3333).fadeIn(5555).slideUp(2000).slideDown(1000);

这适用于Stackoverflow端的一些上部div元素。

多个元素的排队动画

3 个答案: