Barrie Reader Barrie Reader - 3 months ago 25
Javascript Question

jQuery each() with a delay

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!

Answer

Or, something like this:

$.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/