jQuery adding functions to the animation queue

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 a…

Accepted Answer

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

jQuery adding functions to the animation queue

Solution

Problem