Question

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 how to animate a table row, now I am trying to queue up these animations.

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

Here’s the javascript I have:

$('.trigger').click(function(){

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

    $clickedTableRow.find('td > 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
    });

});

When I call the slideUp() 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 $clickedTableRow.hide(); function to happen only after all divs have finished? Then once the $clickedTableRow has been hidden, I want to queue up the animation that slides down the new table row:

$newTableRow
    .insertAfter($clickedTableRow)
    .show()
    .find('td > div')
    .slideDown(panelSpeed);

How can I queue up these multiple actions?

Answer 1

One possibility is to set a flag that is used to check if the queued code has run.

Here’s a simple example: http://jsfiddle.net/4J4TY/

Something like this:

$('.trigger').click(function(){

    var hasRun = false; // determine if queued code has run yet

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

    $clickedTableRow.find('td > div').slideUp('slow', function(){
        if( !hasRun ) {
            hasRun = true;
            alert('animation complete, ready to hide table row');
            $clickedTableRow.hide();
        }
    });

});

Now the flag is set to true the first time it runs, so the code inside the if() will only execute once.