jquery - 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);

Answer 6

遅延はキューで動作します。そして、私が知る限り、css操作（アニメーション以外）はキューに入れられません。

Answer 7

delaynoneキュー関数では機能しないため、を使用する必要があります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").show(0).delay(1000).removeClass("error");

後でありがとう。