jQueryの中でテーブルの行の削除をアニメーション化

StackOverflow https://stackoverflow.com/questions/1303343

  •  19-09-2019
  •  | 
  •  

質問

私はテーブルから行を削除するときに「slideUp」アニメーションを使用するためにいくつかのjQueryコードを書かれています。なめらかな表示されるアニメーションのために、私は、DIVタグで行の各TDの内容を包み、アニメーションが完了すると、実際のTDを除去し、div要素にslideUp関数と呼ばれます。次のようにそのためのコードは

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

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

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

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

役に立ちましたか？

解決

あなたがアニメーションのすべての要素が含まれているtrを削除しているため。これ以上の元素、これ以上のアニメーション。 slideUpsのすべてが同じ時間を取るべきであることを考えると、あなたはおそらく$(this).parent().remove()に$(this).closest('tr').remove()からフィニッシュコールバックを変更して逃げることができます。

他のヒント

私はあなたがこれを行うことができますjQueryプラグインを書きました。あなたは、追加した行を削除し、それはそのようなdivのか何かを使ってデータをラップする必要はありませんすることができます。 のhttpでそれをチェックアウト：// www.fletchzone.com/post/jQuery-Unobtrusively-Animated-Add-and-Remove-Table-Rows.aspxする

ベスト、

Fletch

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top