I thought it would be simple but I still can't get it to work. By clicking one button, I want several animations to happen - one after the other - but now all the animations are happening at once. Here's my code - can someone please tell me where I'm going wrong?:

I had a similar issue on my website, and I've since thought of using the callbacks, but it seems slightly inelegent to do so. it'd be nice if you could somehow do it with jquery chaining. at the moment I do it using the delay function : animate the first thing. delay the second thing by the same amount of time I'm animating the first thing, then animate it.. and so on.
–
MrVimesAug 14 '11 at 20:40

but how to animate simultaneously. this will animate one after another.
–
WasimJun 9 at 11:14

Is it possible to make it more generic. What if you don't know how many elements there are? I've tried a for loop but it doesn't seem to work for that.
–
www139Jul 7 at 13:42

Queue only works if your animating the same element. Lord knows why the above got voted up but it will not work.

You will need to use the animation callback. You can pass in a function as the last param to the animate function and it will get called after the animation has completed. However if you have multiple nested animations with callbacks the script will get pretty unreadable.

I suggest the following plugin which re-writes the native jQuery animate function and allows you to specify a queue name. All animations that you add with the same queue name will be run sequentially as demonstrated here.

Yep, callbacks were what I was going to suggest.
–
Matt SachAug 2 '09 at 9:10

Thanks redsquare. But since there's not gonna be a whole lot of animations going on I don't think there's a need for a plugin (an extra 6.26kb). I'll keep it in mind for future though.
–
lorenziumAug 2 '09 at 13:52

Nice update! Very neat and works as intended.
–
BoraAug 7 '12 at 12:08

2

It IS a very nice pattern. One more suggestion - IE 8 (at least) deals with the "arguments" object differently. First, it needs to be made a true Array, then the .splice method needs both parameters. Use var args = Array.prototype.slice.call(arguments); var rest = [].splice.call(args, 1, args.length-1);
–
jschrabJul 12 '13 at 15:14

This is an elegant solution as it avoids deeply nesting callbacks. I've assembled a little jsFiddle that puts this into action. Regarding the support of wrapped plain objects: this official jQuery tutorial uses the same approach.
–
PhilippNov 13 '13 at 15:38

(replace 1000 with your desired animation speed. the idea is your delay function delays by that amount and accumulates the delay in each element's animation, so if your animations were each 500 miliseconds your delay values would be 500, 1000, 1500)

edit: FYI jquery's 'slow' speed is also 600miliseconds. so if you wanted to use 'slow' still in your animations just use these values in each subsequent call to the delay function - 600, 1200, 1800

This doesn't seem like a very dynamic method seing that you have to manually update these values.
–
neufutureJun 5 '12 at 20:51

This is how I've done it in the past and the reason I ended up here ie to get a better method but this does work, and you could set variables for the duration of the animations and use them in the delay so that you would only have to update the duration as normal... then there's seemingly no downside??
–
Dean_WilsonJul 16 '12 at 10:32

Extending on jammus' answer, this is perhaps a bit more practical for long sequences of animations. Send a list, animate each in turn, recursively calling animate again with a reduced list. Execute a callback when all finished.

The list here is of selected elements, but it could be a list of more complex objects holding different animation parameters per animation.

The call to $.globalQueue.queue() is just queueing a call to your tag's animation, but it queues it on the body tag.

When jQuery hits your tag animation in the body queue, your tag's animation starts, on the queue for your tag - but the way the jQuery animation framework works, any custom animation callback causes a tag's animation queue (the body's in this case) to halt, until the custom animation calls the passed-in dequeue() function. So, even though the queues for your animated tag and body are separate, the body tag's queue is now waiting for its dequeue() to be called. http://api.jquery.com/queue/#queue-queueName-callback

We just make the last queued item on the tag's queue a call to continue the global queue by calling its dequeue() function - that's what ties the queues together.

For convenience the globalQueue.queue method returns a this reference for easy chaining.

setInterval

For the sake of completeness, it's easy to land here just seeking an alternative to setInterval - that is you're not so much looking to make separate animations coordinate, as just fire them over time without the strange surge ahead in your animation caused by the way newer browsers will postpone animation queues and timers to save CPU.