3

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

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

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

现在我希望该行的背景颜色为浅黄色，仅持续 3 秒，然后恢复正常

4

4 回答 4

2

您可以尝试使用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)
于 2012-10-10T02:12:24.077 回答
1

jsBin 演示

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

  • td通过 CSS 默认为所有元素设置自定义颜色
  • tr默认 CSS为所有元素设置黄色
  • 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);
  
});
于 2012-10-10T02:27:26.257 回答
0

添加一个new具有该样式的类，然后使用delayandqueue等待 3 秒，然后new使用. 删除removeClass。

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;
}

演示

于 2012-10-10T02:12:07.837 回答
0

正如您所说，您使用的是 jQueryUI，您可以使用内置的“突出显示”效果，您可以在此处查看它的演示http://jqueryui.com/effect/

于 2012-10-10T02:54:05.350 回答