jQuery：我可以在 addClass() 等之间调用 delay() 吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2510115/
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
jQuery: Can I call delay() between addClass() and such?
提问by serg
Something as simple as:
像这样简单的事情：
$("#div").addClass("error").delay(1000).removeClass("error");
$("#div").addClass("error").delay(1000).removeClass("error");
doesn't seem to work. What would be the easiest alternative?
似乎不起作用。什么是最简单的选择？
回答by PetersenDidIt
You can create a new queue item to do your removing of the class:
您可以创建一个新的队列项来删除类：
$("#div").addClass("error").delay(1000).queue(function(next){
$(this).removeClass("error");
next();
});
Or using the dequeuemethod:
或者使用出队方法：
$("#div").addClass("error").delay(1000).queue(function(){
$(this).removeClass("error").dequeue();
});
The reason you need to call nextor dequeueis to let jQuery know that you are done with this queued item and that it should move on to the next one.
您需要调用next或的原因dequeue是让 jQuery 知道您已经完成了这个排队的项目，并且它应该转移到下一个项目。
回答by Jasper
AFAIK the delay method only works for numeric CSS modifications.
AFAIK 延迟方法仅适用于数字 CSS 修改。
For other purposes JavaScript comes with a setTimeout method:
出于其他目的，JavaScript 附带了一个 setTimeout 方法：
window.setTimeout(function(){$("#div").removeClass("error");}, 1000);
回答by Sandbox
I know this this is a very old post but I've combined a few of the answers into a jQuery wrapper function that supports chaining. Hope it benefits someone:
我知道这是一篇很老的帖子，但我已经将一些答案合并到一个支持链接的 jQuery 包装器函数中。希望它有益于某人：
$.fn.queueAddClass = function(className) {
this.queue('fx', function(next) {
$(this).addClass(className);
next();
});
return this;
};
And here's a removeClass wrapper:
这是一个 removeClass 包装器：
$.fn.queueRemoveClass = function(className) {
this.queue('fx', function(next) {
$(this).removeClass(className);
next();
});
return this;
};
Now you can do stuff like this - wait 1sec, add .error, wait 3secs, remove .error:
现在你可以做这样的事情 - 等待 1 秒，添加.error，等待 3 秒，删除.error：
$('#div').delay(1000).queueAddClass('error').delay(2000).queueRemoveClass('error');
$('#div').delay(1000).queueAddClass('error').delay(2000).queueRemoveClass('error');
回答by warpdesign
jQuery's CSS manipulation isn't queued, but you can make it executed inside the 'fx' queue by doing:
jQuery 的 CSS 操作未排队，但您可以通过执行以下操作使其在 'fx' 队列内执行：
$('#div').delay(1000).queue('fx', function() { $(this).removeClass('error'); });
Quite same thing as calling setTimeout but uses jQuery's queue mecanism instead.
与调用 setTimeout 完全相同，但使用 jQuery 的队列机制代替。
回答by user6322596
Of course it would be more simple if you extend jQuery like this:
当然，如果你像这样扩展 jQuery 会更简单：
$.fn.addClassDelay = function(className,delay) {
var $addClassDelayElement = $(this), $addClassName = className;
$addClassDelayElement.addClass($addClassName);
setTimeout(function(){
$addClassDelayElement.removeClass($addClassName);
},delay);
};
after that you can use this function like addClass:
之后你可以像addClass一样使用这个函数：
$('div').addClassDelay('clicked',1000);
回答by prodigitalson
Delay operates on a queue. and as far as i know css manipulation (other than through animate) is not queued.
延迟对队列进行操作。据我所知，css 操作（通过动画除外）没有排队。
回答by Alex Jolig
delaydoes not work on none queue functions, so we should use setTimeout().
delay不适用于无队列函数，因此我们应该使用setTimeout().
And you don't need to separate things. All you need to do is including everything in a setTimeOutmethod:
而且你不需要分开东西。您需要做的就是在setTimeOut方法中包含所有内容：
setTimeout(function () {
$("#div").addClass("error").delay(1000).removeClass("error");
}, 1000);
回答by csandreas1
Try this simple arrow funtion:
试试这个简单的箭头函数：
setTimeout( () => { $("#div").addClass("error") }, 900 );
setTimeout( () => { $("#div").addClass("error") }, 900 );
回答by Pablo Martinez
Try this:
尝试这个：
function removeClassDelayed(jqObj, c, to) {
setTimeout(function() { jqObj.removeClass(c); }, to);
}
removeClassDelayed($("#div"), "error", 1000);
