How to queue an animation for multiple elements and wait until they finished?
Compact syntax with timing methods:
1 $('.many').animate(attributes,options,$).jQueryStuff();The jQuery token $ is used instead of a callback function to indicate the timing version of animate().
Compare this to the old way with more syntactic fluff:
1 var waiting = $('.many').length;
2 $('.many').animate(attributes, options, function(){
3 if (!--waiting) {
4 $(this).jQueryStuff();
5 }
6 });Similar patterns with animations
- How to wait for the elements' animation queues to get empty?
$('.some').wait().doSome().jQueryStuff(); - How to wait for the end of the elements' current animations?
$('.some').join().doSome().jQueryStuff(); - How to wait for the end of the elements' current animations for a given queue name?
$('.some').join(queue).doSome().jQueryStuff(); - How to wait for the elements' animation queues to get empty with .join()?
$('.some').join(true).doSome().jQueryStuff(); - How to wait for the elements' animation queues for a given queue name to get empty?
$('.some').join(queue,true).doSome().jQueryStuff(); - How to queue an animation and return immediately?
$('.some').animate(attributes,options); - How to queue an animation for a single element and wait until it finished?
$('#single').animate(attributes,options,$).jQueryStuff();