这是我的表行我的要求是第一次显示黄色的行背景颜色4秒后颜色变淡我正在使用下面的代码
$('#lock').prepend('<tr><td>hello</td><td>cool</td><td>dad</td></tr>');我正在使用以下代码
$("#lock tr").css('background-color','yellow').delay(4000).css('background-color','fade');
问题延迟无效
让CSS渲染背景颜色过渡(比JS更快):
#lock {
background-color: yellow;
transition: background-color 0.3s;
}
#lock.red {
background-color: red;
}
现在加载DOM后,在关闭<body>标记之前添加以下JavaScript :
// JS solution
setTimeout(function() {
var element = document.getElementById('lock');
element.classList.add('red');
}, 4000);
// jQuery solution
$('#lock').delay(4000).addClass('red'); // no good, check the edit.
编辑
如果您想知道代码无效的原因,请查看此答案.该delay函数似乎只适用于队列中的项目(例如动画).除此之外,使用我的第一个JS解决方案中给出的常规旧计时器:
var $table = $("#lock");
$table.css("background-color", "yellow");
setTimeout(function () {
$table.css("background-color", "red");
}, 4000);
如果你还想要淡入淡出过渡,你仍然需要使用一些CSS.
祝好运.