Animieren des Löschens von Tabellenzeilen in jQuery

Question

Ich habe einen jQuery-Code geschrieben, um die "slideUp" -Animation zu verwenden, wenn Zeilen aus einer Tabelle gelöscht werden. Damit die Animation glatt erscheint, habe ich den Inhalt jedes TD in der Zeile mit DIV-Tags umschlossen und die SlideUp-Funktion auf den DIVs aufgerufen, wobei nach Beendigung der Animation die eigentlichen TDs entfernt wurden. Der Code dafür lautet wie folgt:

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

So weit, so gut. Allerdings bemerkte ich, dass dieser Code nicht mit dem tatsächlichen TR nicht entfernt, nur seinen Inhalt, so habe ich die folgende Zeile die TR zu entfernen:

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

Das Problem ist, dass, nachdem ich die Zeile oben hinzugefügt, die Animation beenden Arbeiten. Mit anderen Worten, die Reihe verschwindet einfach ohne den schönen Gleiteffekt. Weiß jemand, warum das so ist und wie man es umgehen kann?

Answer 1

Weil Sie die tr entfernen, die alle animierten Elemente enthält. Keine Elemente mehr, keine Animation mehr. Vorausgesetzt, dass alle slideUp s die gleiche Zeit benötigen, können Sie wahrscheinlich den Callback von $(this).parent().remove() auf $(this).closest('tr').remove() ändern.

Answer 2

Ich schrieb ein jQuery-Plugin, mit dem Sie dies tun können. Sie können Zeilen hinzufügen und entfernen und müssen Ihre Daten nicht mit einem div oder ähnlichem umschließen. Check it out bei http://www.fletchzone.com/post/jQuery-Unobtrusively-Animated-Add-and-Remove-Table-Rows.aspx

Best,

Fletch