Javascript jQuery each() 延迟
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6360024/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery each() with a delay
提问by Barrie Reader
So, I would like an element to fade in and wait half a second, then fade the next in etc...
所以，我想要一个元素淡入并等待半秒钟，然后淡入下一个等等......
My code:
我的代码：
$('.comment').each(function() {
$(this).css({'opacity':0.0}).animate({
'opacity':1.0
}, 450).delay(500);
});
I'm obviously doing something really silly.... (I hope)... My question is: Is this even possible? if not - can anyone point me in the right direction?
我显然在做一些非常愚蠢的事情......（我希望）......我的问题是：这甚至可能吗？如果没有 - 任何人都可以指出我正确的方向吗？
Thanking you!
感谢您！
回答by stecb
Or, something like this:
或者，像这样：
$.each($('.comment'), function(i, el){
$(el).css({'opacity':0});
setTimeout(function(){
$(el).animate({
'opacity':1.0
}, 450);
},500 + ( i * 500 ));
});
回答by Ashkan Ghodrat
try something like this
尝试这样的事情
$(this).find('#results').children().each(function(index){
$(this).delay(500 * index).slideDown(500);
})
回答by Matthew Manela
Try this out:
试试这个：
var time = 500;
$('.comment').each(function() {
var $this = $(this);
function delayed() {
$this.css({'opacity':0.0}).animate({
'opacity':1.0
}, 450);
}
setTimeout( delayed , time );
time += 500;
});
回答by Billy Moon
or using .next()and a callback function:
或使用.next()和回调函数：
// create a function to fade in the comment block
function showit(item){
// animate the fade effect (and any other required)
item.animate({opacity:1},450,function(){
// after completing the animation, call the
// showit function with the next comment block
showit(item.next('.comment'))
})
}
// set the opacity of comment blocks to 0 and
// select the first one, then call showit to
// initialise animation loop
showit( $('.comment').css({opacity:0}).eq(0) )
Fiddle here: http://jsfiddle.net/rJnnZ/
在这里小提琴：http: //jsfiddle.net/rJnnZ/
I think this is a better solution, because it waits until the previous animation is finished, before moving onto the next, rather than calculating the timer beforehand, which can become un-synchronised under heavy CPU usage, or various other circumstances.
我认为这是一个更好的解决方案，因为它会等到上一个动画完成，然后再转到下一个动画，而不是事先计算计时器，这在 CPU 使用率高或其他各种情况下可能会变得不同步。
回答by kapa
This function will iterate through every element in the collection (in this example $comments) and fade in all of them. Every animation will start when the previous one has finished.
此函数将遍历集合中的每个元素（在本例中$comments）并淡入所有元素。每个动画将在前一个动画完成时开始。
var $comments=$('.comment');
(function fadeIterator($collection, index) {
$collection.eq(index).fadeIn(1000, function () {
fadeIterator($collection, index++);
});
}($comments, 0));
