Jquery Queueing Animations

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

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

Solution 2:

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

Solution 3:

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:

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

Solution 4:

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