How can I detect the completion of multiple simultaneous animations on many elements in jQuery?
<p>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.</p>

<p>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.</p>

<p>Wave 1: Simultaneously</p>

<ul>
<li>close the details sections under all elements</li>
<li>fade in elements which were hidden</li>
</ul>

<p>Wave 2: Simultaneously</p>

<ul>
<li>open the clicked element's details section</li>
<li>fade out certain elements in the other column</li>
</ul>

<p>Wave 3: Simultaneously</p>

<ul>
<li>open a details section under the remaining elements of the other column</li>
</ul>

<p>I normally use the callback function of the <code>animate</code> 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 <code>queue: false</code> doesn't exactly fit the bill.</p>

<p>How can I detect the completion of multiple simultaneous animations on many elements?</p>
