jQuery 动画表格 tbody 标签

Question

我有这个有效的代码：

    $('a.click_more').click(function() {
            $(this).parents('table.city_table').children('tbody').toggle();
    });

我正在尝试创建一个非常流畅的动画来显示和隐藏表格元素。我试过这个，但它与顶部代码相同，尽管有一点延迟。可能是我设置的半秒持续时间。

    $('a.click_more').click(function() {
        $(this).parents('table.city_table').children('tbody').animate({height:'toggle'}, 500);
    });

有没有人完成了表格行、单元格、列等的动画制作或有什么建议？

如果有人想玩代码，我已经创建了一个 jsfiddle：http://jsfiddle.net/BHqSM/1/

Answer 1

表格元素的动画效果不佳，无法绕过它。例如，动画行的唯一平滑方法是将内部 td 内容包装在 div 中并为 div 设置动画

Answer 2

试试slideToggle()函数：

$('a.click_more').click(function() {
    $(this).parents('table.city_table').children('tbody').slideToggle('slow');
});

Answer 3

由于您没有提及您正在寻找什么样的过渡，所以很难给您一个很好的例子。然而，jQuery 确实为您提供了一些开箱即用的转换。例如，您可以使用.fadeToggle() 淡入/淡出元素或使用.slideToggle() 向上/向下滑动元素，而不是使用仅在块和无之间切换显示的.toggle()。