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

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/