Question

可能重复：
Jquery delay execution of script

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

我认为这段代码可能会这样做：

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

可悲的是，没有，任何帮助都会非常感激。提前致谢。

Answer 1

您可以使用 setTimeout() 功能：

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

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

   setTimeout(function() {
       $rows.removeClass("pageLoad");
   }, 800);
});

Answer 2

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

.delay()仅用于处理动画。您将不得不使用常规的setTimeout来处理您正在做的事情：

希望它符合您的需求:)

<强>代码

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

 setTimeout(function () {      
         $("#rowone.one, #rowtwo.three, #rowthree.two").removeClass("pageLoad");         
}, 800);

Answer 3

请使用setTimeout。

setTimeout(function() {
 $("#rowone.one").removeClass("pageLoad");
 $("#rowtwo.three").removeClass("pageLoad");
 $("#rowthree.two").removeClass("pageLoad");
}, 800);

Answer 4

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

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

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

FIDDLE

现在它很容易打电话，更容易放入时间，而且你不会重复代码。

Answer 5

我删除了：.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>

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

延迟删除Jquery中的类

5 个答案: