将表行添加到表中时淡入淡入

Question

我使用以下代码向表的末尾添加新行：

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

我想使用像.fadeIn("slow")这样的东西，这样每一行都会在它出现之前淡入，但我似乎没有得到任何动画：

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

知道我错过了什么吗？

谢谢你:)。

Answer 1

试试这个：

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

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

Answer 2

在具有淡入淡出背景的表格顶部添加一行：

$('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/

Answer 3

在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...