多个元素上的排队动画

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

Paul Irish 就此主题写了一篇很棒的文章：

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

实际上，所有 jQuery 的 fx 方法（包括 .animate()）都提供了完整的回调。也就是说，当您需要在动画完成后执行一些非特效内容时。

如果您只是想让不同的 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
        });
    });
});

这会被翻译成类似update

参考您的评论，将其输入到您的 firebug 或 webkit 控制台中：

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

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