Question

I have a rather complicated setup with two columns full of elements.
Clicking on one element opens up a ‘details’ section under it, closes any other previously opened details section in this column, filters the other list and opens ‘details’ sections under the remaining elements of the other column.

This is rather heavy for the user so I’m trying to animate all this and separate it into many steps or waves so that the user can understand what’s going on.

Wave 1: Simultaneously

• close the details sections under all elements
• fade in elements which were hidden

Wave 2: Simultaneously

• open the clicked element’s details section
• fade out certain elements in the other column

Wave 3: Simultaneously

• open a details section under the remaining elements of the other column

I normally use the callback function of the animate method to start the second animation when the first one finishes, but since I’m waiting for multiple animations to finish, this approach doesn’t work. Also, these animations affect many elements, so using queue: false doesn’t exactly fit the bill.

How can I detect the completion of multiple simultaneous animations on many elements?

Answer 1

use jQuery’s “when” and “done” methods. they can be used to aggregate multiple “deffered” object like the ones animate returns.
Example :

$.when(
   $('#A').animate({height : 100}), 
   $('#B').animate({width : 50})
).done(function() { alert('All Done!') })