在 jQuery 中动画删除表行答案

【问题标题】：Animating the deletion of table rows in jQuery在 jQuery 中动画删除表行
【发布时间】：2015-07-04 20:42:37
【问题描述】：

我编写了一些 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();

问题是在我添加上面的行之后，动画停止工作。换句话说，行只是消失了，没有很好的滑动效果。有谁知道为什么会这样以及如何解决它？

【问题讨论】：

你在哪里添加了那行？我在 parent().remove() 之后添加了它，它对我来说很好。
嘿 Sett，我在我发布的上一行之后添加了行删除行。感谢您的快速反馈！

标签： jquery animation row slideup

【解决方案1】：

因为您要删除包含所有动画元素的tr。没有更多的元素，没有更多的动画。鉴于所有slideUps 应该花费相同的时间，您可以将完成回调从$(this).parent().remove() 更改为$(this).closest('tr').remove()。

【讨论】：

我总是对这个网站的响应速度感到惊讶。感谢您的快速回复，霍布斯。我理解您对删除包含动画元素的 tr 的后果的意思，但我认为这些操作是按顺序发生的……我想事实并非如此。 javascript 的异步特性每次都让我着迷！顺便说一句，你的把戏奏效了。谢谢！
嗯，实际上是异步的动画调用（例如 slideUp），因为它们在计时器事件中完成它们的工作......但无论如何，它们不会等待完成，所以你的删除是甚至在动画有机会正确开始之前触发。

【解决方案2】：

我写了一个 jQuery 插件，可以让你做到这一点。您可以添加和删除行，并且不需要用 div 或类似的东西包装您的数据。查看http://www.fletchzone.com/post/jQuery-Unobtrusively-Animated-Add-and-Remove-Table-Rows.aspx

最好的，

弗莱奇

【讨论】：