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.

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.

• javascript
• jquery
• queue

4 Answers 4

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

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

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

This would also work.

            $('#first').show(800);
            setTimeout("$('#second').show(800)", 800);
            setTimeout("$('#third').show(800)", 1600);
            setTimeout("$('#forth').show(800)", 2400);

I know its not purely sequential, but I find it makes it easy to read and allows you to set off animations with more flexability.

Note: That you have to quote the code you want executed. I haven't used any double quotes in the previous code but if you did you would have escape them as follows.

            $('#first').animate({"width":"100px"}, 500);
            setTimeout("$('#second').animate({\"width\":\"100px\"}, 500)", 800);
            setTimeout("$('#third').animate({\"width\":\"100px\"}, 500)", 1600);
            setTimeout("$('#forth').animate({\"width\":\"100px\"}, 500)", 2400);

You can usually avoid this by alternating which quotes you use, but though it was worth a mention.

UPDATE: Here is another option, and it's also worth checking out jquery promises here

            $('#first').show(800);
            $('#second').delay(800).show(800);
            $('#third').delay(1600).show(800);
            $('#forth').delay(2400).show(800);