1

我试图找出如何使用 jQuery 对多个元素的动画进行排队。

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

这也许是一个项目清单.. 就位.. 一个接一个。

有人可以帮帮我吗？

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

更新：简单的例子。

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

我想让它们一个一个地淡化。所以第 1 项淡入。然后，完成后，第 2 项淡入，依此类推。

我正在使用 jQuery 将一些 Flash“页面构建”类型的动画转换为 HTML。所以我需要在多个元素上排队动画。就像出现一个框，然后将一些文本滑到它上面……等等。

4

3 回答 3

5

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

假设你想一个接一个地淡出一些div，每次淡出需要800ms，那么你可以立即开始第一个，第二个延迟800ms（所以它在另一个结束时开始），第三个一个延迟 1600 毫秒，依此类推...

您可以使用 firebug 或 webkit 控制台执行的自动化示例（喜欢您的示例想法 jAndy！=D）是：

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

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

于 2011-02-03T07:00:39.863 回答
1

Paul Irish wrote a great article on this topic:

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

For your fade-in example, you could do:

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

Adjust to taste.

于 2011-04-19T03:01:31.413 回答
0

实际上所有的 jQuery 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 元素。

于 2011-02-03T06:02:56.840 回答