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修改.

出于其他目的,JavaScript附带了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);