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

Posted 2023-05-08

【中文标题】如何实现 jQuery 动画排队？ [复制]

【英文标题】：How can I achieve jQuery animation queuing? [duplicate]

【发布时间】：2011-01-18 00:01:51

【问题描述】：

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

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

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

我是这样想的：

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

【问题讨论】：

这个问题经常被问到，而且有很多潜在的解决方案。请参阅：***.com/questions/461912/… 和 ***.com/questions/505434/… 和 ***.com/questions/1594077/…

嗯，是的，但是解决方案更好，是jquery插件的形式。

这意味着现有问题的读者现在将被剥夺 jquery 插件解决方案，因为它被发布在此处而不是现有问题上。

【参考方案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

【讨论】：

效果很好，又添加了一行，这样我会在动画结束后显示我的分页，这样看起来就不会奇怪了。谢谢

【参考方案2】：

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

【参考方案3】：

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

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

【参考方案4】：

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

var callbacks = [];

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

callbacks[5]();

【讨论】：

那里有新的思维方式。您最好通过一组元素直接使用each() 并直接使用该对象，而不是使用字符串值作为 ID。这样它可能更具可读性，并且不需要命名元素#a、#b、#c...