jQuery 将表格行添加到表格时淡入淡出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9193894/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fade in a table row when it's added to a table
提问by ale
I have the following code to add a new row to the end of a table:
我有以下代码可以在表的末尾添加新行：
$('.row-data:last').after('some HTML rows');
I want to use something like .fadeIn("slow")so each row fades in before it appears but I don't seem to be getting any animation:
我想使用类似的东西，.fadeIn("slow")这样每一行在它出现之前淡入，但我似乎没有得到任何动画：
$('.row-data:last').after('some HTML rows').fadeIn("slow");
Any ideas what I'm missing?
任何想法我错过了什么？
Thank you :).
谢谢 ：）。
回答by czerasz
Try this:
尝试这个：
var rows = $('some HTML rows');
rows.hide();
$('.row-data:last-child').after(rows);
rows.fadeIn("slow");
Example: http://jsfiddle.net/qdPAe/1/
回答by Andreybeta
Add a row on top of table with a fade background:
在带有淡入淡出背景的表格顶部添加一行：
$('button').click(function() {
$('<tr class="anim highlight"><td>new text</td></tr>')
.hide()
.prependTo('table tbody')
.fadeIn("slow")
.addClass('normal');
});
Add background transition animation:
添加背景过渡动画：
.anim {
transition: background 5s linear;
}
.highlight{
background: #FF3333;
}
.normal {
background: transparent;
}
回答by Chris Kempen
Testing in Chrome, my table row faded in great, albeit messy in other browsers. Your problem stems from not hiding the row you're adding in the first place, then not fading in the elements you wish to see afterwards (be it the row or the cells). I got the following working pretty well:
在 Chrome 中进行测试时，我的表格行褪色效果很好，尽管在其他浏览器中很乱。您的问题源于没有隐藏您首先添加的行，然后没有在您希望看到的元素（无论是行还是单元格）中淡入淡出。我得到以下工作得很好：
var row = jQuery('<tr><td>test</td><td>row</td></tr>');
row.hide();
jQuery('.row-data:last').after(row);
row.fadeIn(500);
Hope this helps! jQuery v1.7 BTW...
希望这可以帮助！jQuery v1.7 顺便说一句...
回答by Barry Chapman
You cannot apply animations to table rows. Animate the TD's. It will be seamless.
您不能将动画应用于表格行。动画 TD。这将是无缝的。
//JS
//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)
});
}
Then call it like:
然后像这样调用它：
fadeRow( $('selectorOfTR') );
Optionally, you can modify this for hiding/removing rows also. Just supply the remove() call in the callback portion of this script.
或者，您也可以修改它以隐藏/删除行。只需在此脚本的回调部分提供 remove() 调用。
