Javascript jQuery each（）带有延迟

所以，我想让一个元素淡入，等待半秒钟，然后淡入下一个，等等

我的代码：

$('.comment').each(function() {                 
                    $(this).css({'opacity':0.0}).animate({
                        'opacity':1.0
                    }, 450).delay(500);
                });

我显然在做一些非常愚蠢的事情。。。。（我希望）。。。我的问题是：这可能吗？如果没有-有人能给我指出正确的方向吗

谢谢你

试试这个：

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;
 });

---

或者，像这样：

$.each($('.comment'), function(i, el){

    $(el).css({'opacity':0});

    setTimeout(function(){
       $(el).animate({
        'opacity':1.0
       }, 450);
    },500 + ( i * 500 ));

});

---

demo=>

此函数将迭代集合中的每个元素（在本例中为

$comments

），并淡入所有元素。每个动画都将在上一个动画完成后开始

var $comments=$('.comment');

(function fadeIterator($collection, index) {
    $collection.eq(index).fadeIn(1000, function () {
        fadeIterator($collection, index++);
    });
}($comments, 0));

或使用

.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) )

在这里拉小提琴：

---

我认为这是一个更好的解决方案，因为它会等到上一个动画完成后再进入下一个动画，而不是事先计算计时器，在CPU使用量过大或其他各种情况下，计时器可能会变得不同步。

尝试类似的方法

$(this).find('#results').children().each(function(index){
        $(this).delay(500 * index).slideDown(500);
})

---

你的代码在做什么，而不是你想让它做什么？可能是我从未见过的问题的重复。。。。然而，这个问题确实有不同的答案。。。值得保留它，让别人有不同的建议。真棒的答案。我也试着这么做，延迟乘以索引的技巧非常有效。谢谢对于那些只看到不完整标题“jqueryeach（）带延迟”（处理动画）的人。只有动画才能使用延迟。如果您查看您的孩子，并希望（例如）触发单击，则延迟将不起作用。另见