Question

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

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

我想要完成的是一个渐进式动画，就像上一个div的动画完成后每个div的jquery.fadeIn（）一样。这样做的最佳方式是什么？

我这样想：

我通过ajax-done
我遍历它们 - 我可以将它们隐藏起来然后迭代它们
对于每一个，我用fadeIn（）显示它，当animimation结束时，我显示下一个 - 对于每一个我执行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]();

如何实现jQuery动画排队？

4 个答案: