Анимация удаления строк таблицы в jQuery

Question

Я написал некоторый код jQuery для использования анимации «slideUp» при удалении строк из таблицы. Чтобы анимация выглядела плавно, я обернул содержимое каждого TD в строке тегами DIV и вызвал функцию slideUp в DIV, удаляя действительные TD по завершении анимации. Код для этого выглядит следующим образом:

$("tr[id$=" + rowID + "]").children("td").each(function() {
    $(this).children("div").slideUp(function() {
        $(this).parent().remove();
    });        
});

Пока все хорошо. Однако я заметил, что этот код не удаляет действительный TR, а только его содержимое, поэтому я добавил следующую строку для удаления TR:

$("tr[id$=" + rowID + "]").remove();

Проблема в том, что после добавления строки выше анимация перестала работать. Другими словами, строка просто исчезает без приятного скользящего эффекта. Кто-нибудь знает, почему это так и как обойти это?

Answer 1

Я написал плагин jQuery, который позволяет вам делать это. Вы можете добавлять и удалять строки, и вам не нужно оборачивать ваши данные div или чем-то подобным. Проверьте это в http://www.fletchzone.com/post/jQuery-Unobtrusively-Animated-Add-and-Remove-Table-Rows.aspx

Best

Флетч

Answer 2

Поскольку вы удаляете tr, который содержит все анимированные элементы. Нет больше элементов, нет больше анимации. Учитывая, что все slideUp s должны занимать одинаковое количество времени, вы, вероятно, можете избежать изменения финишного обратного вызова с $(this).parent().remove() на $(this).closest('tr').remove().