Question

在删除表中的行时，我编写了一些jQuery代码来使用“slideUp”动画。为了使动画看起来流畅，我用DIV标签包装了每个TD的内容，并在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 s应该花费相同的时间，您可以将完成回调从$(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

最佳，

陈伟伟

在jQuery中动画删除表行

2 个答案: