jQuery each() with a delay

Question

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!

What is your code doing, as opposed to what you want it to do? — Matt, Jun 15 '11 at 15:21
possible duplicate of [How to add pause between each iteration of jQuery .each()?](http://stackoverflow.com/questions/5202403/how-to-add-pause-between-each-iteration-of-jquery-each) — Alnitak, Jun 15 '11 at 15:27
I never saw that question.... However, this question does have different answers though... Worth keeping it for others to have different suggestions — Barrie Reader, Jun 16 '11 at 09:06

score 41 · Accepted Answer · answered Jun 15 '11 at 15:25

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/

score 13 · Answer 2 · edited Aug 16 '16 at 12:43

13

try something like this

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

edited Aug 16 '16 at 12:43

Giacomo1968

25,759
11
71
103

answered Feb 24 '13 at 21:12

Ashkan Ghodrat

3,162
2
32
36

2

Awesome answer. I was trying to do the same and the trick of multiplying the delay with the index worked great. Thanks! – sh4 Oct 07 '13 at 07:10
For others that only saw the incomplete headline "jQuery each() with a delay" (deals with animations). Only with animations you can use delay. If you go over your children and you want e.g. **trigger a click, delay will not work**. See also http://stackoverflow.com/q/4544126/1066234 – Avatar Apr 04 '15 at 06:13

score 5 · Answer 3 · answered Jun 15 '11 at 15:23

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

score 4 · Answer 4 · edited Aug 16 '16 at 12:43

or using .next() and a callback function:

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

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.

score 3 · Answer 5 · answered Jun 15 '11 at 15:32

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.

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

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

jsFiddle Demo

jQuery each() with a delay

5 Answers5

Linked