jsBin demo 的

Question

提交Ajax表单后，我将使用此代码动态地将新行添加到表中

var $var = $('table');
var newRow = "<tr><td> blah </td></tr>"

$var.find('tr:last-child').before(newRow)

现在我希望该行的背景颜色仅为淡黄色3秒，然后再改回正常

Answer 1

您可以尝试使用setTimeout功能：

var $newRow = $("<tr class='light'><td>blah<td></tr>");
$var.find('tr:last-child').before($newRow);
setTimeout(function(){
    $('#table tr.light').removeClass('light')
}, 3000)

Answer 2

jsBin demo 的

一个好主意是（没有jQuery UI 来设置BG颜色的动画）：

通过CSS默认

td

通过CSS默认

tr

jQuery - 使用隐藏 tr元素插入新的td
淡出td 元素！

<强> CSS

table tr{
  display:block;
  background:yellow;
}
table td{
  display:block;
  background:#eee;
}

<强>的jQuery

var $var = $('table');

$('button').click(function(){

   var newRow = $("<tr><td> NEW ROW! </td></tr>");
   $var.find('tr:last-child').before(newRow);
   newRow.find('td').hide().fadeTo(3000,1);

});

Answer 3

添加具有该样式的课程new，然后使用delay和queue等待3秒，然后使用new删除removeClass。< / p>

<强> JS

var $newRow = "<tr class='new'><td> blah<td></tr>";
$var.find('tr:last-child').before($newRow)
    .delay(3000).queue(function(){
        $('.new').removeClass('new');
    });

<强> CSS

.new {
    background-color: yellow;
}

demo

Answer 4

如你所说，你正在使用jQueryUI，你可以使用内置的“突出显示”效果，你可以在这里看到它的演示http://jqueryui.com/effect/

如何在jquery中更改新添加的行的行背景颜色

4 个答案:

jsBin demo 的