web-dev-qa-db-ja.com

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

次のような単純なもの：

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

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

jquerydelay
173
serg

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

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

または dequeue メソッドを使用：

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

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

348
PetersenDidIt

私の知る限り、遅延方法は数値のCSS変更に対してのみ機能します。

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

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

これは非常に古い投稿であることは知っていますが、いくつかの答えを連鎖をサポートする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');

8
Sandbox

jQuery CSS操作はキューに入れられませんが、次を使用して「fx」キュー内で実行できます。

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

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

6
warpdesign

もちろん、次のように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);
4
user6322596

遅延はキューで動作します。そして、私が知っている限りでは、CSS操作（アニメートを介して以外）はキューに入れられていません。

2
prodigitalson

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

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

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

これを試して：

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