jQuery：addClass（）などの間でdelay（）を呼び出すことはできますか？

次のように単純なもの：

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

動作していないようです。最も簡単な代替手段は何でしょうか？

新しいキューアイテムを作成して、クラスを削除できます。

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

または、デキューメソッドを使用します。

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

呼び出す必要がある理由、nextまたはdequeuejQueryに、このキューに入れられたアイテムの処理が完了し、次のアイテムに移動する必要があることを通知するためです。

私の知る限り、delayメソッドは数値CSSの変更に対してのみ機能します。

他の目的のために、JavaScriptにはsetTimeoutメソッドが付属しています。

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

これは非常に古い投稿であることは知っていますが、いくつかの回答を組み合わせて、チェーンをサポートする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;
};

今、あなたはこのようなことをすることができます.error-1 秒待って、追加して、3 秒待って、削除して.errorください：

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

jQueryのCSS操作はキューに入れられませんが、次のようにして 'fx'キュー内で実行させることができます。

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

setTimeoutを呼び出すのとまったく同じですが、代わりにjQueryのキューメカニズムを使用します。

もちろん、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);

遅延はキューに作用します。そして、私が知る限り、（animate以外の）css操作はキューに入れられません。

delayどのキュー関数でも機能しないため、を使用する必要がありますsetTimeout()。

そして、あなたは物事を分離する必要はありません。あなたがする必要があるのはsetTimeOutメソッドにすべてを含めることです：

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

これを試して：

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

この簡単な矢印関数を試してください：

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