淡入錶行，當它添加到表

我有以下代碼到一個新行添加到表的末尾：淡入錶行，當它添加到表

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

淡入錶行，當它添加到表

回答

相關問題