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

【问题标题】：Animating opening/closing of table columns in jQuery在 jQuery 中动画打开/关闭表格列
【发布时间】：2010-01-15 12:34:13
【问题描述】：

如何在 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 只能为“块”元素设置动画有关，而不是“类似表格”显示的元素。那么我可以用块元素制作一个表格吗？还是有另一种方法可以为类似表格的元素设置动画？我找到了this 建议的解决方案，但是将所有表格元素都封装到 DIV 中似乎很麻烦...

【问题讨论】：

你有我们可以使用的测试页吗？
我没有，但我做了一个：antiflu.dds.nl/animatetable。我也已经找到了解决问题的方法，但是如果你愿意，你可以玩它。

标签： jquery html-table jquery-animate

【解决方案1】：

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

这个问题确实是由 jQuery 将 TH 和 TD 项目设置为“显示：块”动画项目引起的。目前还没有办法让 jQuery 表现不同。
将 TH 和 TD 项包含在 DIV 标记中不起作用，一些 Google 搜索显示HTML becomes invalid 在 TABLE 结构中使用 DIV 标记时的建议。
将 TH 和 TD 项的 content 包含在 DIV 标记中不起作用，内容在动画后开始浮动，并且不会停留在 TH 和 TD 项内。
The same article 揭示了使用表格中的 TBODY 部分可以为表格 rows 的打开关闭设置动画。

我成功地实现了我想要的，方法如下：

我将表格切割成几个子表格，由我要显示和隐藏的列组组成
我将这些子表包含在 DIV 标记中，floated 将它们并排放置。
我使用 jQuery 来显示/隐藏这些 DIV。

希望对大家有所帮助，如果找到更优雅的解决方案，请留言。

【讨论】：

呃，差不多一年过去了，这个bug还没有修复。感谢您提供有关如何解决此问题的想法。
这个解决方法的一个棘手之处在于表格行高很容易不同步。我通过绘制具有可见性的表格解决了这个问题：无，运行 jQuery 循环将高度同步到第一列，然后显示表格。祝你好运！

【解决方案2】：

虽然效果不一样，但fadeIn() 和fadeOut() jQuery 方法可以在表格上正常工作。 show() 和 hide() 方法（没有动画）也可以工作。

【讨论】：

谢谢！几乎是这个问题的周年纪念礼物:)

【解决方案3】：

周年快乐。

奇怪的是，1 月似乎是表格滑动效果时间。我想它是为了轻松回到工作中嘿 :) 但我设法创造了一种侧面的柱子折叠效果。

$(table).each(...
    var columnNo = $(cell).index();
    $('div', cell).animate({ width: '0px' }, 'slow');
    $(cell).closest("table")
        .find("tr td:nth-child(" + (columnNo + 1) + ") div")
        .animate({ width: '0px' }, 'slow')
...)

基本上这是使用 div 的一种解决方法。我选择每个cell“th”，然后在该列中找到所有其他单元格。而progressivlu 它使用动画减少每个div 像素大小。该表格将根据 HTML 规范重新计算，因为占用空间正在发生变化。完成后，您可以隐藏该列以使它们“消失”

将所有内容包装在 div 中的脚本，例如在页面加载时或单击按钮后。您也可以在动画完成后删除 div，以防它与您的表单提交或其他脚本混淆。

 $('#Stupid_RadGrid th').each(function () {
          $(this).wrapInner("<div></div>"); 
 });
 $('#Stupid_RadGrid td').each(function () {
         $(this).wrapInner("<div></div>");
 });

一旦我得到它的双向工作，我会更新。

【讨论】：

【解决方案4】：

我的解决方案是使用 div 覆盖。动画将在此 div 叠加层上完成，而表格元素保持不变。

这里是demo。

JS：

$("div").css("width", $("table").width() + 10); //10px of margin
$("div").css("height", $("table").height() + 10); //10px of margin

$("#show").click( function(){
    $("div").animate({
        left: $("div").width()
    }, function (){
    $("div").hide();
    });
});

$("#hide").click( function() {
    $("div").show( "fast", function (){
        $("div").animate({ left: "0px" });
    });
});

【讨论】：