在一段时间延迟后更改div的类

Question

我想在页面加载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")
});

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

Answer 1

delay方法向动画队列中添加一个项，但由于addClass不是动画效果，因此它不会放在队列中，它会立即生效。

您可以使用queue方法将代码放入动画队列中，以便它在延迟后运行：

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

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

使用动画处理延迟的另一种方法是使用setTimeout方法：

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

Answer 2

DEMO

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

Answer 3

delay仅适用于jQuery队列中的元素。由于addClass不是默认情况下添加到队列中的动画，因此无论delay如何，它都会立即运行。对于一般延迟，您应该使用Javascript的原生setTimeout：

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

jsfiddle