动画在jQuery中打开/关闭表列

Question

如何在jQuery中为表列的打开/关闭设置动画？

我目前有这段代码:

jQuery(function($){
    $(".togglebutton").click(function(e){
        if (cost_visible) {
            $(".numbers").animate({width: 80}, 1500);
            $(".costs").animate({width: 0}, 1500);

        } else {
            $(".numbers").animate({width: 0}, 1500);
            $(".costs").animate({width: 60}, 1500);
        }
    });
});

我的HTML包含标准TABLE/TR/TH/TD标签,TH和TD标签带有用于识别必须打开或关闭的类名的类名.

问题似乎是在jQuery触及表之后,受影响的单元突然感觉需要堆叠在彼此之上而不是整齐地保持连续.

我假设这与jQuery只能动画"块"元素有关,而不是显示"像表格"的元素.那么我可以用块元素制作一个表格吗？还是有另一种方法来动画表格式元素？我已经找到了这个建议的解决方案,但是将所有的表元素包装到DIV中只是为了动画似乎很麻烦......

Answer 1

经过一番研究,我发现......

• 问题确实是由jQuery设置的TH和TD项目为动画的"display:block"项引起的.目前还没有办法让jQuery表现得与众不同.
• 在DIV标记中包含TH和TD项目不起作用,一些Google搜索提出了在TABLE结构中使用DIV标记时HTML变得无效的建议.
• 内附内容 TH和TD项目的DIV标签不起作用,内容开始动画后悬空,TH和TD项目中不留.
• 同一篇文章揭示了使用表格中的TBODY部分可以为表行的开始关闭设置动画.

我成功了我想要的东西,这里是如何:

• 我将表格切割成几个子表,这些子表由我想要显示和隐藏的列组组成
• 我将这些子表封装在DIV标签中,并将它们彼此相邻地浮动.
• 我使用jQuery来显示/隐藏这些DIV.

我希望这可以帮助任何人,如果找到更优雅的解决方案,请留言.