Question

I’m having trouble with triggering sequential animations using jQuery 1.7.2. There are a bunch of other questions about this on here but they all seem to break if you use a recent version of jQuery implying that the API changed.

I have zero-to-many elements that I want to animate a fade in on sequentially. My current code looks something like:

var divs = $('div');
divs.css('opacity',0);
divs.animate({
  opacity: 1
},{
  duration: 1000,
  queue: 'myQueue'
});

With jQuery 1.7’s introduction of named queues I’d somewhat naïvely assumed that this would queue up an animation for each element onto a named queue and then execute it, but obviously this isn’t working.

What would you suggest?

Answer 1

Try this – DEMO

$('div').each(function(i) {
    $(this).delay((i + 1) * 1000).fadeIn(1000);
});