JQuery каждый() с задержкой

Итак, я хотел бы, чтобы элемент затухал и подождал полсекунды, затем угаснул следующий и т.д.

Мой код:

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

Я, очевидно, делаю что-то действительно глупо... (надеюсь)... Мой вопрос: возможно ли это? если нет - может ли кто-нибудь указать мне в правильном направлении?

Благодарим вас!

Ответ 1

Или что-то вроде этого:

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

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

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

});

demo = > http://jsfiddle.net/steweb/9uS56/

Ответ 2

попробуйте что-то вроде этого

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

Ответ 3

Попробуйте следующее:

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

Ответ 4

Эта функция будет перебирать каждый элемент в коллекции (в этом примере $comments) и исчезать во всех из них. Каждая анимация начнется, когда предыдущий закончен.

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

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

jsFiddle Demo

Ответ 5

или используя .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) )

Заклинание здесь: http://jsfiddle.net/rJnnZ/

Я думаю, что это лучшее решение, потому что оно ждет, пока предыдущая анимация не закончится, прежде чем перейти к следующему, а не заранее рассчитать таймер, который может стать несинхронизированным при интенсивном использовании ЦП или в других обстоятельствах.