代码之家 › 专栏 › 技术社区 › littlegreen

在jquery中设置表列的打开/关闭动画

jquery-animate html-table jquery

littlegreen · 技术社区 · 16 年前

如何在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只能动画化“block”元素有关,而不能动画化显示“table-like”的元素。那么我可以用块元素制作一个表吗?或者有其他方法来设置类似表格的元素的动画吗?我找到了 this 建议的解决方案,但将所有表元素封装到DIV中只是为了动画,似乎很麻烦…

4 回复 | 直到 9 年前

littlegreen 16 年前

经过研究,我发现…

问题确实是由jquery将th和td项设置为动画的“display:block”项引起的。到目前为止,还没有办法使jquery的行为有所不同。
在DIV标签中包含th和td项是不起作用的,一些Google搜索给出了这样的建议: HTML becomes invalid 在表结构中使用DIV标记时。
围住内容 DIV标记中的th和td项不起作用,内容在动画后开始浮动,并且不在th和td项内。
The same article 显示为表格的开始和结束设置动画排可以使用表中的车身部分。

不过,我成功地实现了我想要的,方法如下:

我将表剪切成几个子表,这些子表由我要显示和隐藏的列组组成。
我把这些子表附在DIV标签中, floated 它们挨在一起。
我使用jquery来显示/隐藏这些分区。

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

Rick 15 年前

虽然效果不同,但是fadein()和fadeout()jquery方法在表上工作正常。show()和hide()方法(不带动画)也可以工作。

Piotr Kula David Boike 11 年前

周年纪念快乐。

奇怪的是,一月似乎是表滑效应时间。我想应该是让它轻松回到工作中去了。嘿:)但是我设法创建了一个侧面柱折叠效果。

$(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”,然后在该列中查找其他单元格。以及ProgressVlu,它使用动画减少了每个DIV像素的大小。表将根据HTML规范重新计算,因为占用的空间正在变化。完成后,您可以隐藏列以使它们“消失”

脚本将所有内容包装在一个分区中,如页面加载或单击按钮后。你也可以在动画完成后删除这个DIV,以防它与你的表单提交或其他脚本发生冲突。

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

我会在双向工作后更新。

Aleics 10 年前

我的解决方案是使用DIV覆盖。动画将在这个DIV覆盖上完成,而table元素保持不变。

这里 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" });
    });
});