189

像这样简单的东西：

$("#div").addClass("error").delay(1000).removeClass("error");

似乎不起作用。什么是最简单的选择？

4

10 回答 10

386

您可以创建一个新的队列项来删除该类：

$("#div").addClass("error").delay(1000).queue(function(next){
    $(this).removeClass("error");
    next();
});

或者使用出列方法：

$("#div").addClass("error").delay(1000).queue(function(){
    $(this).removeClass("error").dequeue();
});

你需要调用nextor的原因dequeue是让 jQuery 知道你已经完成了这个排队的项目，并且它应该移动到下一个项目。

于 2010-03-24T18:05:29.097 回答
51

AFAIK 延迟方法仅适用于数字 CSS 修改。

出于其他目的，JavaScript 带有一个 setTimeout 方法：

window.setTimeout(function(){$("#div").removeClass("error");}, 1000);
于 2010-03-24T17:52:53.350 回答
11

我知道这是一个非常古老的帖子，但我已经将一些答案组合到一个支持链接的 jQuery 包装函数中。希望它对某人有益：

$.fn.queueAddClass = function(className) {
    this.queue('fx', function(next) {
        $(this).addClass(className);
        next();
    });
    return this;
};

这是一个 removeClass 包装器：

$.fn.queueRemoveClass = function(className) {
    this.queue('fx', function(next) {
        $(this).removeClass(className);
        next();
    });
    return this;
};

现在你可以做这样的事情 - 等待 1 秒，添加.error，等待 3 秒，删除.error：

$('#div').delay(1000).queueAddClass('error').delay(2000).queueRemoveClass('error');

于 2016-08-17T01:31:26.907 回答
6

jQuery 的 CSS 操作没有排队，但您可以通过执行以下操作使其在“fx”队列中执行：

$('#div').delay(1000).queue('fx', function() { $(this).removeClass('error'); });

与调用 setTimeout 完全一样，但使用 jQuery 的队列机制。

于 2014-12-23T15:23:35.960 回答
4

当然如果你像这样扩展 jQuery 会更简单：

$.fn.addClassDelay = function(className,delay) {
    var $addClassDelayElement = $(this), $addClassName = className;
    $addClassDelayElement.addClass($addClassName);
    setTimeout(function(){
        $addClassDelayElement.removeClass($addClassName);
    },delay);
};

之后你可以像 addClass 一样使用这个函数：

$('div').addClassDelay('clicked',1000);
于 2016-05-11T21:20:12.517 回答
2

延迟对队列进行操作。据我所知，css操作（除了通过动画）没有排队。

于 2010-03-24T17:50:35.947 回答
2

delay不适用于无队列功能，因此我们应该使用setTimeout().

而且你不需要分开东西。您需要做的就是在setTimeOut方法中包含所有内容：

setTimeout(function () {
    $("#div").addClass("error").delay(1000).removeClass("error");
}, 1000);
于 2018-05-30T05:19:07.507 回答
0

尝试这个：

function removeClassDelayed(jqObj, c, to) {    
    setTimeout(function() { jqObj.removeClass(c); }, to);
}
removeClassDelayed($("#div"), "error", 1000);
于 2011-01-03T09:29:40.903 回答
0

试试这个简单的箭头功能：

setTimeout( () => { $("#div").addClass("error") }, 900 );

于 2019-09-18T07:37:38.127 回答
-1 
$("#div").addClass("error").show(0).delay(1000).removeClass("error");

稍后谢谢我。

于 2021-03-26T06:03:12.393 回答