淡入表行，当它添加到表

我有以下代码到一个新行添加到表的末尾：淡入表行，当它添加到表

$('.row-data:last').after('some HTML rows');

我想使用类似.fadeIn("slow")所以每一行中淡出在它出现之前，但我似乎没有得到任何动画：

$('.row-data:last').after('some HTML rows').fadeIn("slow");

任何想法我失踪？

谢谢:)。

来源

2012-02-08 ale

我我也尝试过slideDown（“慢”）... – ale 2012-02-08 13:08:07

表和表元素不会被动画。你应该使用div或类似的东西 – Yorgo 2012-02-08 13:09:42

尝试'$（'。row-data：last'）。fadeIn（'slow'）。stop（）。after（'some HTML rows'）;' – diEcho 2012-02-08 13:09:54

试试这个：

var rows = $('some HTML rows'); 
rows.hide(); 
$('.row-data:last-child').after(rows); 
rows.fadeIn("slow");

例子：http://jsfiddle.net/qdPAe/1/

来源

2012-02-08 13:10:34 czerasz

您无法为表格行添加动画效果。 – 2012-02-08 13:11:53

我不明白？看看这个：http://jsfiddle.net/qdPAe/1/ – czerasz 2012-02-08 13:18:46

不错！唯一的问题是一个'display：block;'被添加到行中，什么东西混淆了宽表。你需要在淡入淡出之后添加一个'rows.css（'display'，'table-row'）;'以防止这种情况发生。 – Demnogonis 2012-06-15 15:25:21

你不能动画应用到表行。动画TD的动画。这将是无缝的。

// JS

function fadeRow(rowSelector, callback) 
{ 
    var childCellsSelector = $(rowSelector).children("td"); 
    var ubound = childCellsSelector.length - 1; 
    var lastCallback = null; 

    childCellsSelector.each(function(i) 
    { 
     // Only execute the callback on the last element. 
     if (ubound == i) 
      lastCallback = callback 

     $(this).fadeIn("slow", lastCallback) 

    }); 
}

然后调用它像：

fadeRow($('selectorOfTR'));

您可以选择/修改这个隐蔽删除行也。只需在该脚本的回调部分提供remove（）调用即可。

来源

2012-02-08 13:11:34

在Chrome中进行测试，我的表格行褪色很好，尽管在其他浏览器中很乱。你的问题源于不隐藏你首先添加的行，然后不会淡入你希望看到的元素（无论是行还是单元格）。我得到以下工作相当好：

var row = jQuery('<tr><td>test</td><td>row</td></tr>'); 

row.hide(); 

jQuery('.row-data:last').after(row); 

row.fadeIn(500);

希望这会有所帮助！ jQuery的V1.7 BTW ...

来源

2012-02-08 13:15:34

在桌子上添加一行褪色背景：

$('button').click(function() { 
    $('<tr class="anim highlight"><td>new text</td></tr>') 
    .hide() 
    .prependTo('table tbody') 
    .fadeIn("slow") 
    .addClass('normal'); 
});

添加背景过渡动画：

.anim { 
    transition: background 5s linear; 
} 
.highlight{ 
    background: #FF3333; 
} 
.normal { 
    background: transparent; 
}

见http://jsfiddle.net/qdPAe/699/

来源

2016-07-07 01:02:35 Andreybeta

淡入表行，当它添加到表

回答

相关问题