Question

I’m having a hard time figuring out how queue’s work in jQuery, especially the fx queue. What I want to do is:

Animate multiple different elements one after another

Take a look at this fiddle first. When you click on the button, both of the elements are being animated. Now I know I can do something like this fiddle, where I put the animation in the callback of the first animation, but this isn’t an option because I have a situation where I have a pool of animations, and I want to arbitrarily run any of them in a particular sequence. For example, I might have animations A, B, C, D, and E which all animate different elements. Sometimes I will want to execute in the order B->A->C, another time I might want A->B->C.

How can I use queues to achieve this functionality?

Answer 1

Since your animations are moving different elements, you might be better off managing your own queue than doing it with jquery’s. You could store the animations you want to run in an array.

animations = [animation_a, animation_b, animation_c];

and then at the end of each animation call the function which runs the next one. Like:

function run_next() {
    if ( animations.length > 0 ) {
        next_animation = animations.shift();
        next_animation();
    }
}

function animation_a() {
    $("#element1").slideDown(500, run_next);
} 

function animation_b() {
    $("#element2").animate({left:'-=200'},1500, run_next);
} 

See this fiddle.