Jquery queueing animations

Question

I have several animations that I want to perform on different objects in the dom.

I want them to occur in order.

I do not want to do it like this:

$('#first').show(800, function () 
{ $('#second').show(800, function () {...etc...});

I want to add all my animations(and cpu intensive functions) to some kind of queue object that will make sure they execute sequentially.

Answer 1

I'm not sure why you don't want to use the method you described. If its purely from an organizational standpoint you don't have to use anonymous functions

function showFirst() {
  $('#first').show(800, showSecond);
}

function showSecond() {
  $('#second').show(800, showThird);
}

function showThird() {
  $('#third').show(800);
}

function startAnimation() {
  showFirst();
}

Answer 2

Check out the documentation for jQuery Effects. The stuff about queuing should do what you need.

Answer 3

http://plugins.jquery.com/project/fxqueues

Answer 4

I've just used this plugin, http://plugins.jquery.com/project/timers, the other day to do a similar thing. Your basically iterating through all the matched dom elements and then performing an animation each one when the index * your millisecond count.

The code was something like this:

HTML:

<div id="wrapper">
   <div>These</div>
   <div>Show</div>
   <div>In</div>
   <div>Order</div>
</div>

jQuery

$("#wrapper div").foreach( function(i) {
    i = i + 1;
    $(this).oneTime(800 * i, "show", function()  {
        $(this).show();
    });
});