javascript延迟不起作用答案

【问题标题】：javascript delay is not workingjavascript延迟不起作用
【发布时间】：2016-06-28 20:10:24
【问题描述】：

这是我的表格行我的要求是第一次以黄色显示行的背景颜色 4 秒后颜色变淡我正在使用以下代码

$('#lock').prepend('&lt;tr&gt;&lt;td&gt;hello&lt;/td&gt;&lt;td&gt;cool&lt;/td&gt;&lt;td&gt;dad&lt;/td&gt;&lt;/tr&gt;');

我正在使用以下代码

$("#lock tr").css('background-color','yellow').delay(4000).css('background-color','fade');

问题延迟不起作用

【问题讨论】：

你添加jquery.min.js了吗？
是的 poonam 我用过 jquary。 min.js
尝试添加此脚本<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
您在控制台中看到任何 JS 错误吗？
是的，代码中存在一些缺陷。例如，将背景颜色设置为“淡入淡出”。也推荐JS和CSS结合使用。

标签： javascript jquery

【解决方案1】：

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

编辑

如果您想知道为什么您的代码不起作用，请查看this 答案。 delay 函数似乎只适用于队列中的项目（例如动画）。对于其他任何事情，请使用我的第一个 JS 解决方案中给出的常规旧计时器：

var $table = $("#lock");
$table.css("background-color", "yellow");

setTimeout(function () {
    $table.css("background-color", "red");
}, 4000);

如果您还想要一个淡入淡出过渡，您仍然需要使用一些 CSS。

祝你好运。

【讨论】：