title: jQuery: How to queue a function to complete after an array of animations?
body: <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="https://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>