5

如何在 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 中似乎很麻烦，只是为了动画......

4

4 回答 4

5

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

  • 该问题确实是由 jQuery 将 TH 和 TD 项目设置为“显示：块”动画项目引起的。目前还没有办法让 jQuery 表现不同。
  • 将 TH 和 TD 项包含在 DIV 标记中不起作用，一些 Google 搜索显示在 TABLE 结构中使用 DIV 标记时HTML 变得无效的建议。
  • 将 TH 和 TD 项的内容包含在 DIV 标记中不起作用，内容在动画后开始浮动，并且不会停留在 TH 和 TD 项内。
  • 同一篇文章表明，可以使用表中的 TBODY 部分为表行的开始关闭设置动画。

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

  • 我将表格切割成几个子表格，由我想要显示和隐藏的列组组成
  • 我将这些子表包含在 DIV 标记中，并将它们彼此相邻浮动。
  • 我使用 jQuery 来显示/隐藏这些 DIV。

我希望这对任何人都有帮助，如果找到更优雅的解决方案，请留言。

于 2010-01-18T12:11:19.523 回答
3

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

于 2011-01-05T16:20:27.830 回答
0

周年快乐。

奇怪的是，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>");
 });

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

于 2015-01-13T15:40:21.560 回答
0

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

这里演示。

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" });
    });
});
于 2015-09-09T09:24:14.997 回答