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

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

Answer 3

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

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

您无法将动画应用于表格行。动画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（）调用。

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

4 个答案: