Question

The problem is that when I try doing multiple animations they all happen the same time.
Is there any way to have animations go one after another without using callbacks?

Here’s what I want to do:

$('#a1').click(function() { $('#div1').hide(3000); });
$('#a2').click(function() { $('#div2').hide(3000); });
$('#a3').click(function() { $('#div3').show(3000); });

If you click on #a1 and then click on #a2 then #a3 before the first animation completes then it shouldn’t start right away but instead wait until the animation queue is empty then start the next one.

Take this demo for example

I want to be able to click a1 then a2 then a3 one after the another and first have it hide the first div completely, then the second completely, and then show the third.

My example is overly simple and while this can be done with callbacks, my real problem can’t so callbacks aren’t an option.

In essence, if you click all three the animation should complete in 9 seconds.

This DEMO should alert ('took around 9 seconds to complete')

Answer 1

Use .queue() on a common jQuery object:

var q = $({}); // this could also be a common parent, e.g. $('body')
$('#a1').click(function() {
    q.queue(function(next) {
        $('#div1').hide(3000, next);
    });
    return false;
});
$('#a2').click(function() {
    q.queue(function(next) {
        $('#div2').hide(3000, next);
    });
    return false;
});
$('#a3').click(function() {
    q.queue(function(next) {
        $('#div3').show(3000, next);
    });
    return false;
});​

Demo