jQuery: как поставить очередь на выполнение функции после массива анимаций?

Question

Я пытаюсь оживить строку таблицы, скользящую вверх, затем добавить новую строку таблицы и оживить новую строку таблицы, сползающую вниз. Я прочитал на how to animate a table row, теперь я пытаюсь поставить в очередь эти анимации.

<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> 

Вот Javascript У меня есть:

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

}); 

Когда я вызываю функцию slideUp(), появляется, как будто каждый ДИВ скользит вверх одновременно, но полная функция вызывается после каждого DIV вместо сразу же после все эти дивизии закончились. Как я могу поставить в очередь функцию $clickedTableRow.hide();, которая произойдет только после того, как все фиды закончены? Затем, как только $clickedTableRow было скрыто, я хочу стоять в очереди анимацию, которая скользит вниз новой строки таблицы:

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

Как я могу стоять в очереди эти несколько действий?

Answer 1

Одна из возможностей - установить флаг, который используется для проверки того, запущен ли в очередь код.

Вот простой пример: http://jsfiddle.net/4J4TY/

Что-то вроде этого:

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

}); 

Теперь флаг установлен в true первый раз, когда он работает, так что код внутри if() будет выполнять только один раз.

Answer 2

В параметрах есть параметр 'queue: true/false'. Используйте это для анимации очереди. Если вы вызовете метод stop, будет создана новая очередь, и они снова будут работать вместе.

EDIT: Извините, не очень хорошо объяснял. Вы хотите сделать скрытую часть очереди анимации, поэтому не помещайте ее в полный текст, добавляйте ее в очередь анимаций с queue = true.

Answer 3

Вот один пример того, как проверить, если анимация завершена:

http://www.gmarwaha.com/blog/2009/06/09/jquery-waiting-for-multiple-animations-to-complete/

Я не уверен, если это является наиболее эффективным решением, но это работает. Кажется, я не могу найти встроенную утилиту jquery для проверки, завершены ли все анимации.