延迟后更改 div 的类答案

【问题标题】：Changing the class of a div after a time delay延迟后更改 div 的类
【发布时间】：2013-12-03 12:04:20
【问题描述】：

我想在页面加载 10 秒后向 div 元素 (id="one") 添加一个类，而无需将任何东西悬停或单击等。我尝试了以下代码，但它不起作用：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


$(document).ready(function(){
$('#one').delay(10000).addClass("grow")
});

知道上面的代码哪里出错了吗？

【问题讨论】：

.delay() is not a replacement for JavaScript's native setTimeout function
.delay() 仅适用于 jQuery 动画的上下文。只需使用setTimeout()。
$('#one').delay(10000).queue(function(){$(this).addClass("grow");}) jsfiddle.net/9k4vw 或使用超时
jQuery: Can I call delay() between addClass() and such?的可能重复

标签： javascript jquery css class

【解决方案1】：

delay方法在动画队列中添加了一个item，但由于addClass不是动画效果，所以没有放到队列中，马上生效。

可以使用queue方法将代码放入动画队列，使其延迟后运行：

$('#one').delay(10000).queue(function(){
  $(this).addClass("one");
});

演示：http://jsfiddle.net/6V9rX/

使用动画进行延迟的另一种方法是使用setTimeout 方法：

window.setTimeout(function(){
  $('#one').addClass("one");
}, 10000);

【讨论】：

【解决方案2】：

DEMO

$(document).ready(function(){
    window.setTimeout(function(){
        $("#one").addClass("one");
    },10000);
});

【讨论】：

【解决方案3】：

delayonly works on elements on jQuery's queue。由于 addClass 不是默认添加到队列中的动画，因此无论delay 如何，它都会立即运行。对于一般延迟，您应该使用 Javascript 的原生 setTimeout：

$(function(){
    setTimeout(function() {
        $('#one').addClass("grow")
    }, 10000);
});

jsfiddle

【讨论】：