19

可能重复：
Jquery 延迟执行脚本

我正在编写一个小脚本，当页面加载时，将 CSS 子类分配给三个元素。800 毫秒后，我希望它删除该子类。

我认为这段代码可能会做到这一点：

<script type="text/javascript">
$(document).ready(function () {


        $("#rowone.one").addClass("pageLoad");
        $("#rowtwo.three").addClass("pageLoad");
        $("#rowthree.two").addClass("pageLoad");

        .delay(800);    
        $("#rowone.one").removeClass("pageLoad");
        $("#rowtwo.three").removeClass("pageLoad");
        $("#rowthree.two").removeClass("pageLoad");

})
</script>

可悲的是它没有，任何帮助将不胜感激。提前致谢。

4

5 回答 5

52

您可以使用setTimeout()功能：

在指定延迟后调用函数或执行代码片段。

$(document).ready(function () {
   var $rows = $("#rowone.one, #rowtwo.three, #rowthree.two").addClass("pageLoad");

   setTimeout(function() {
       $rows.removeClass("pageLoad");
   }, 800);
});
于 2012-08-05T10:40:39.570 回答
16

试试这个：我也不确定为什么上面没有人使用链式表达式可能是我错过了一些东西

.delay()仅设计用于动画。您将不得不使用常规的 setTimeouts 来完成您正在做的事情：

希望它适合你的需要:)

代码

 $("#rowone.one, #rowtwo.three, #rowthree.two").addClass("pageLoad");

 setTimeout(function () {      
         $("#rowone.one, #rowtwo.three, #rowthree.two").removeClass("pageLoad");         
}, 800);
于 2012-08-05T10:48:24.713 回答
2

用于setTimeout此。

setTimeout(function() {
 $("#rowone.one").removeClass("pageLoad");
 $("#rowtwo.three").removeClass("pageLoad");
 $("#rowthree.two").removeClass("pageLoad");
}, 800);
于 2012-08-05T10:41:22.327 回答
1

将其包装在一个函数中并传递状态，如下所示：

$(document).ready(function () {
    doClasses('add');
    setTimeout(function() { doClasses('remove'); }, 800)

    function doClasses(state) {
        $("#rowone.one, #rowtwo.three, #rowthree.two")[state+'Class']("pageLoad");
    }
});

小提琴

现在它很容易调用，也更容易放入 timeOut，而且您无需重复代码。

于 2012-08-05T10:51:09.277 回答
0

我删除了：.one .three . two类选择器并添加了超时功能。应该管用。

<head>
<style type="text/css">
.pageLoad{color:red;}
</style>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>



<body>
<div id="rowone">rowone</div>
<div id="rowtwo">rowtwo</div>
<div id="rowthree">rowthree</div>



<script type="text/javascript">
$(document).ready(function () {


        $("#rowone").addClass("pageLoad");
        $("#rowtwo").addClass("pageLoad");
        $("#rowthree").addClass("pageLoad");




})

 function removeC(){
$("#rowone").removeClass("pageLoad");
        $("#rowtwo").removeClass("pageLoad");
        $("#rowthree").removeClass("pageLoad");
}

setInterval(removeC, 5000);


</script>
</body>

于 2012-08-05T11:00:44.540 回答