jQuery：我可以在addClass()之类的之间调用delay()吗？

Question

就像这样简单：

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

似乎不起作用。最简单的替代方案是什么？

Answer 1

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

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

或者使用出队方法：

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

您需要调用

next

或

dequeue

的原因是让 jQuery 知道您已完成此排队项目，并且它应该移至下一个。

Answer 2

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

出于其他目的，请使用全局 setTimeout 方法：

window.setTimeout(function(){$("#div").removeClass("error");}, 1000);

Answer 3

我知道这是一篇非常古老的帖子，但我已将一些答案合并到支持链接的 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');

Answer 4

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

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

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

Answer 5

当然如果你像这样扩展 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);

Answer 6

延迟对队列进行操作。据我所知，CSS 操作（除了通过 animate 之外）没有排队。

Answer 7

delay

不适用于无队列功能，因此我们应该使用

setTimeout()

。

而且你不需要把东西分开。您需要做的就是将所有内容包含在

setTimeOut

方法中：

setTimeout(function () {
    $("#div").addClass("error").delay(1000).removeClass("error");
}, 1000);

Answer 8

试试这个：

function removeClassDelayed(jqObj, c, to) {    
    setTimeout(function() { jqObj.removeClass(c); }, to);
}
removeClassDelayed($("#div"), "error", 1000);

Answer 9

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

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

Answer 10

另一种方式...

$("#div").addClass("error"); 
setTimeout(function () { $("#div").removeClass("error"); }, 1000);

Answer 11

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

稍后谢谢我。