Can't make all elements of a class appear after delays

Question

I'm trying to make all the elements of a certain class show, but each after a delay.

This code shows all the elements instantly, but I want to wait 1 second between each.

$('.notify').each(function(index) {
    $(this).fadeIn('slow');
});

I've tried using setTimeout but it 'loses' the element variable (the one called 'this'). I've also tried using .delay() but that just makes all the elements show together after 1 second.

Answer 1

You could do something like this:

$('.notify').each(function(i) {
  $(this).delay(i * 1000).fadeIn('slow');
});

This would fade in the first instantly, the second after a 1000ms, etc...just tweak the delay if needed, add some number of ms to create a delay before the first if you want.

Note: this delay is between the start of each .fadeIn(), if you want to wait a full second after if finishes fading in, add the duration to that 1000 (default duration is 400ms).