JavaScript 延迟不起作用

Question

JavaScript 延迟不起作用

4

这是我的表行，我的需求是第一次显示行的背景颜色为黄色，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');

问题：延迟不起作用。

- Midhun Suresh

尝试添加此脚本 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>。 - Mohammed Abrar Ahmed

1

嗯，代码中确实存在一些缺陷。例如，将背景颜色设置为“fade”。同时建议使用JS和CSS的组合。 - JasonK

控制台没有错误 @techie - Midhun Suresh

正如@JasonK所指出的那样，.css('background-color','fade')似乎无效。你应该尝试使用.css('background-color','#fff')。 - techie_28

@MidhunSuresh 为什么不试试我的答案并解决问题呢？ - JasonK

显示剩余8条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JasonK · Accepted Answer

让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。

祝好运。