jQuery: How to queue a function to complete after an array of animations?
<p>I am trying to animate a table row sliding up, then adding a new table row, and animate the new table row sliding down. I have read up on <a href="http://stackoverflow.com/questions/467336/jquery-how-to-use-slidedown-or-show-function-on-a-table-row">how to animate a table row</a>, now I am trying to queue up these animations.</p>

<pre><code>&lt;table&gt;
    &lt;tr&gt;
        &lt;td&gt;&lt;div&gt;&lt;a class="trigger" "href="#"&gt;Hide this row and add a row after this one&lt;/a&gt;&lt;/div&gt;&lt;/td&gt;
        &lt;td&gt;&lt;div&gt;content&lt;/div&gt;&lt;/td&gt;
        &lt;td&gt;&lt;div&gt;content&lt;/div&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;!-- new table row will be added here --&gt;
    &lt;tr class="another-row"&gt;
        &lt;td&gt;&lt;div&gt;content&lt;/div&gt;&lt;/td&gt;
        &lt;td&gt;&lt;div&gt;content&lt;/div&gt;&lt;/td&gt;
        &lt;td&gt;&lt;div&gt;content&lt;/div&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr id="new-row" style="display:none"&gt;
        &lt;td&gt;&lt;div&gt;this row will appear after the row that was clicked&lt;/div&gt;&lt;/td&gt;
        &lt;td&gt;&lt;div&gt;content&lt;/div&gt;&lt;/td&gt;
        &lt;td&gt;&lt;div&gt;content&lt;/div&gt;&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>Here's the javascript I have:</p>

<pre><code>$('.trigger').click(function(){

    var $clickedTableRow = $(this).closest('tr');
    var $newTableRow = $('#new-row');

    $clickedTableRow.find('td &gt; div').slideUp('slow', function(){
        alert('animation complete, ready to hide table row');
        $clickedTableRow.hide();
        //however, this executes after each div has finished sliding up, instead of after the last one has finished
    });

});
</code></pre>

<p>When I call the <code>slideUp()</code> function, it appears as if each div slides up simultaneously, but the complete function is called after each div instead of once after all of those divs have finished. How can I queue the <code>$clickedTableRow.hide();</code> function to happen only after all divs have finished? Then once the <code>$clickedTableRow</code> has been hidden, I want to queue up the animation that slides down the new table row: </p>

<pre><code>$newTableRow
    .insertAfter($clickedTableRow)
    .show()
    .find('td &gt; div')
    .slideDown(panelSpeed);
</code></pre>

<p>How can I queue up these multiple actions?</p>
