CODEWITHSUNDEEP
jquery
flash_guy
flash_guy

Reputation: 53

stagger setInterval multiple elements with same class

i have a bunch of images on my page that fade in , delay, and fade out every 5 seconds

it looks a bit odd since all the classes flash in and out at the exact same time.

is there a way to get each interval to execute 500MS after the previous? or perhaps offset each one?

here is the code that flashes them all at the same time.

  setInterval(function() {
        $(".some_class").fadeIn(500).delay(2000).fadeOut(500);
  }, 5000);

here is a JSfiddle of them flashing at the same time. http://jsfiddle.net/Vds5f/ thank you.

Upvotes: 3

Views: 566

Answers (1)

corg
corg

Reputation: 538

Working off of Aamir's fiddle, this is what I used for a staggered carousel to switch between images rather than just fade in/out. Should have robust timing against window changes and such (though I'm not sure if it's what you're looking for...)

http://jsfiddle.net/Vds5f/5/

I think it helped consistency to separate the function cycleImages from the setInterval:

var $start = +new Date, $ct = 0;
setInterval(function(){
    ++$ct;
    var $frame = (($ct-1)%4+1);
    cycleImages($frame);
}, $i);

Upvotes: 1

Related Questions