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 only works on elements on jQuery's queue。由于默认情况下addClass不是动画添加到队列，因此无论delay如何，它都会立即运行。您应该使用Javascript的原生setTimeout进行一般延迟：

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

jsfiddle

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

3 个答案: