Possible Duplicate:
jquery finish one animation then start the other one
我有一组通过 ajax 加载的 div(我们讨论的是 6 个 div，代表 6 个产品)。
我想要完成的是一个渐进式动画，就像每个 div 的 jquery.fadeIn() ，在前一个 div 的动画完成之后。执行此操作的最佳方法是什么？
我是这样想的:
- 我通过ajax获取新的html元素 - 完成
- 我迭代它们 - 我可以将它们插入隐藏然后迭代它们
- 对于每个动画，我都会用 fadeIn() 来显示它，当动画完成时，我会显示下一个动画 - 对于每个动画，我都会执行 fadeIn 并以某种方式回调到下一个动画...
最佳答案
您可以构建自己的小插件来对元素进行递归调用以按顺序淡入它们。像这样的东西应该有效:
$.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
关于javascript - 如何实现jQuery动画排队？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2283236/