如何实现 jQuery 动画排队？ [复制]

Question

可能重复：
jquery finish one animation then start the other one

我有一组通过 ajax 加载的 div（我们说的是 6 个 div，代表 6 个产品）。

我想要完成的是一个渐进式动画，比如每个 div 的 jquery.fadeIn()，在前一个 div 的动画完成之后。这样做的最佳方法是什么？

我是这样想的：

1. 我通过 ajax 获得了新的 html 元素 - 完成
2. 我迭代它们 - 我可以将它们作为隐藏插入然后迭代它们
3. 对于每一个，我用一个 fadeIn() 显示它，当动画完成时，我显示下一个 - 对于每个我执行fadeIn 并以某种方式回调到下一个...

Answer 1

您可以构建自己的小插件，对元素进行递归调用，以按顺序淡入。这样的事情应该可以工作：

$.fn.queuedFadeIn = function(speed) {
    var elem = $(this);
    if(elem.length > 0) {
        elem.eq(0).fadeIn(speed, function() {
            elem.slice(1).queuedFadeIn(speed);
        });
    }
}

$('.div_selector').queuedFadeIn(1000);

这应该使它们一个接一个地淡化。为了让事情更清楚，这里在伪代码中也是如此：

# If there are elements in the selection:
    # Find the first element in selection, fade it in
       # After fade in, call itself, discarding the first element

Answer 2

animate 函数中有一个回调，旨在在代码完成后运行。

Answer 3

大部分 jQuery 效果都支持回调函数。所以你所概述的应该有效。

http://api.jquery.com/fadeIn/

Answer 4

这是另一种方法。有点奇怪，但它确实有效。

var callbacks = [];

$.each(["f", "e", "d", "c", "b", "a"], function(index, id) {
    callbacks[index] = function() {
        $("#" + id).fadeIn(callbacks[index - 1]);
    };
});

callbacks[5]();