3

By default the jQuery queue that is created for animate() is done per element, I'm wondering if there is a way to create a single queue for all animations done with animate()? I.e. only one animation should be occuring at a time

Toby
  • 957
  • 2
  • 14
  • 34

3 Answers3

5

You could do it with your own custom queue on one element using queue:

http://jsfiddle.net/jRawX/2/

$(function(){

    $('#myQueue')
        .queue('myQueue',function(next){
            $('#t1').animate({left: 100}, 
                            {duration: 1000, 
                             queue: false,
                             complete: next
                            })
        })
        .queue('myQueue',function(next){
            $('#t2').animate({left: 100}, 
                            {duration:1000, 
                             queue:false,
                             complete: next})
        })
        /* etc. */
        .dequeue('myQueue')
})
James Montagne
  • 77,516
  • 14
  • 110
  • 130
  • Closest to what I'm trying to acheive – Toby May 11 '11 at 15:04
  • BTW You can remove the `queue: false` in this case (revision 2 of this answer) – Jeffery To May 11 '11 at 15:56
  • @Jeffery that depends. If you intend to have other animations going on outside of this queue then you want the `queue:false` – James Montagne May 11 '11 at 17:02
  • "only one animation should be occuring at a time" - it doesn't sound like there are other animations happening to me – Jeffery To May 11 '11 at 17:07
  • That's fine, I still like this way better as a general solution since the queue acts independently of other queues. – James Montagne May 11 '11 at 17:09
  • Can anyone explain to me what's going on with those "complete: next"s? I know that they're causing the queue to dequeue after the chain is started, but I don't understand how. What is next referring to? Where does this behavior come from? – Sam Rueby Mar 27 '12 at 18:00
  • Got it: "In jQuery 1.4 the function that's called is passed in another function, as the first argument, that when called automatically dequeues the next item and keeps the queue moving. You would use it like so:" @ http://api.jquery.com/queue/ – Sam Rueby Mar 27 '12 at 18:04
1

Something like this:

$(someElement) // could also be a plain object, e.g. $({})
    .queue('customQueue', function (next) {
        first.animate({ ... }, function () {
            // when the animation is complete, call next() for customQueue
            next();
        });
    })
    .queue('customQueue', function (next) {
        second.animate({ ... }, function () {
            // when the animation is complete, call next() for customQueue
            next();
        });
    })
    // add more animations, then
    .dequeue('customQueue');
Jeffery To
  • 11,836
  • 1
  • 27
  • 42
1

.animate() has a queue option that will only allow one effect per element:

queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately.

Usage

$('div').animate({ height: 50, queue: false });
Community
  • 1
  • 1
Gary Green
  • 22,045
  • 6
  • 49
  • 75
  • 1
    Doesn't that remove the queue all together rather than create a single one for all elements? – Toby May 11 '11 at 15:04