jQueryでテーブル行の削除をアニメ化する

Question

テーブルから行を削除するときに「slideUp」アニメーションを使用するためのjQueryコードを記述しました。アニメーションが滑らかに見えるように、行の各TDの内容をDIVタグでラップし、DIVのslideUp関数を呼び出して、アニメーションの完了時に実際のTDを削除しました。そのコードは次のとおりです：

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

これまでのところ、とても良いです。しかし、私はこのコードは、実際のTRを削除するだけで、その内容なので、私はTRを削除するには、以下の行を追加していないことに気づいた：

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

問題は、私は上記の行を追加した後、アニメーションが終了するということですワーキング。言い換えれば、その行は素晴らしい滑り効果なしで単に消える。なぜこれがそうであり、それをどう回避するのか誰も知っていますか？

Answer 1

すべてのアニメーション要素を含むtrを削除するためです。要素はなく、アニメーションはありません。 slideUpのすべてが同じ時間を要するとすれば、終了コールバックを$(this).parent().remove()から$(this).closest('tr').remove()に変更することで、おそらく逃げることができます。

Answer 2

私はこれを可能にするjQueryプラグインを作成しました。行を追加したり削除したりすることはできますが、divなどでデータを折り返す必要はありません。あなたがその行を追加しましたhttp://www.fletchzone.com/post/jQuery-Unobtrusively-Animated-Add-and-Remove-Table-Rows.aspx

ベスト、

Fletch