Javascript 延迟删除 Jquery 中的类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11815738/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Delay Removing a Class in Jquery
提问by baxterma
Possible Duplicate:
Jquery delay execution of script
可能的重复：
Jquery 延迟执行脚本
I am writing a small script that, when the page loads, assigns a CSS subclass to three elements. 800ms later, I want it to remove that subclass.
我正在编写一个小脚本，当页面加载时，它会为三个元素分配一个 CSS 子类。800 毫秒后，我希望它删除该子类。
I thought this code might do it:
我认为这段代码可以做到：
<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>
Sadly it doesn't, any help would be much appreciated. Thanks in advance.
可悲的是，它没有，任何帮助将不胜感激。提前致谢。
回答by undefined
You can use setTimeout()function:
您可以使用setTimeout()功能：
Calls a function or executes a code snippet after specified delay.
在指定延迟后调用函数或执行代码片段。
$(document).ready(function () {
var $rows = $("#rowone.one, #rowtwo.three, #rowthree.two").addClass("pageLoad");
setTimeout(function() {
$rows.removeClass("pageLoad");
}, 800);
});
回答by Tats_innit
try this: also I am not sure why no-one above used chained expression might be I missed something
试试这个：我也不确定为什么上面没有人使用链式表达可能是我错过了什么
.delay()is only designed to work with animations. You'll have to resort to using regular setTimeouts for what you're doing:
.delay()仅设计用于动画。您将不得不使用常规的 setTimeouts 来完成您正在做的事情：
hope it fit your need :)
希望它适合你的需要 :)
Code
代码
$("#rowone.one, #rowtwo.three, #rowthree.two").addClass("pageLoad");
setTimeout(function () {
$("#rowone.one, #rowtwo.three, #rowthree.two").removeClass("pageLoad");
}, 800);
回答by Dogbert
Use setTimeoutfor this.
setTimeout为此使用。
setTimeout(function() {
$("#rowone.one").removeClass("pageLoad");
$("#rowtwo.three").removeClass("pageLoad");
$("#rowthree.two").removeClass("pageLoad");
}, 800);
回答by adeneo
Wrap it in a function and pass the state, like so:
将它包装在一个函数中并传递状态，如下所示：
$(document).ready(function () {
doClasses('add');
setTimeout(function() { doClasses('remove'); }, 800)
function doClasses(state) {
$("#rowone.one, #rowtwo.three, #rowthree.two")[state+'Class']("pageLoad");
}
});
Now it's easy to call, and easier to put in a timeOut, and you're not repeating code.
现在它很容易调用，更容易放入超时，而且你不需要重复代码。
回答by Brandon
I removed the: .one .three . twoclass selectors and added the timeout feature. should work.
我删除了：.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>
