带有隐藏列的行上的 jQuery SlideUp

发布于 2024-09-06 17:39:41 字数 408 浏览 11 评论 0原文

我有一个表格，当我删除一行时，它会用 SlideUp 进行动画处理。

$(id).find("td div").slideUp

我用这个技巧在一行上使用 SlideUp ： animating-table-rows-with-jquery

当所有列都显示时没有问题，但是当我有隐藏列时，它只是删除没有动画的行。我想这是 SlideUp 的正常行为，但是有什么技巧可以让它与 animate 一起使用吗？我正在考虑测试 td 是否隐藏，不执行任何操作，否则滑动，但我认为这不会成功。

原文

I've got a table and when I remove a row it animates with slideUp.

$(id).find("td div").slideUp

I used this trick to use slideUp on a row : animating-table-rows-with-jquery

There is no problem when all columns are displayed, but when I have hidden columns, it just removes the row with no animation. I guess it is a normal behaviour from slideUp, but is there a trick to make it work with animate? I was thinking of testing if the td is hidden, do nothing, else slideUp, but I don't think this will do the trick.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

等风来 2024-09-13 17:39:41

其原因是，为 slideUp 提供的回调不是在所有动画完成后调用，而是在每个动画完成后调用。由于隐藏列中的div是不可见的，因此不需要发生向上滑动的动画，即立即完成，因此立即调用回调。

然而，回调会删除整行。

有几种方法可以解决这个问题。您自己的想法（不处理无论如何都不可见的 divs）是一种应该可行的方法。

另一种方法是设置删除行的超时时间，而不是在回调中执行此操作。

第三种方法是检查回调中是否还有剩余的 div，如果没有则仅删除该行，即类似

$(id).find("td div").slideUp(function() {
    $(this).remove();                     // remove the div itself
    if ($(id).find("td div").length == 0) // if none are left
        $(id).remove();                   // then remove the row
});

The reason for this is that the callback given to slideUp is not called after all animations are complete, but after each animation is complete. Since the divs in the hidden column aren't visible, the sliding up animation doesn't need to happen, i.e. is completed immediately, and thus the callback is called immediately.

The callback, however, removes the whole row.

There are several ways to deal with this. The idea that you had yourself (not dealing with divs that aren't visible anyway) is one way that should work.

Another way is to set a time out to remove the row, instead of doing it in the callback.

A third way is to check in the callback if there are any divs left, and only remove the row if there are not, i.e. something like

$(id).find("td div").slideUp(function() {
    $(this).remove();                     // remove the div itself
    if ($(id).find("td div").length == 0) // if none are left
        $(id).remove();                   // then remove the row
});

回复收藏 0 原文

~没有更多了~