jQuery: addClass () ile bu tür arasında delay () öğesini çağırabilir miyim?

Şu kadar basit bir şey:

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

çalışmıyor gibi görünüyor. En kolay alternatif ne olurdu?

Sınıfı kaldırmanız için yeni bir kuyruk öğesi oluşturabilirsiniz:

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

Veya dequeue yöntemini kullanarak :

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

Aramanız nextya dequeueda jQuery'ye bu kuyruğa sokulmuş öğeyle işin bittiğini ve bir sonrakine geçmesi gerektiğini bildirmektir.

AFAIK gecikme yöntemi yalnızca sayısal CSS değişiklikleri için çalışır.

Diğer amaçlar için JavaScript bir setTimeout yöntemiyle gelir:

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

Bu çok eski bir yazı olduğunu biliyorum ama birkaç cevap zincirleme destekleyen bir jQuery sarma işlevine birleştirdim. Umarım birine fayda sağlar:

$.fn.queueAddClass = function(className) {
    this.queue('fx', function(next) {
        $(this).addClass(className);
        next();
    });
    return this;
};

Ve burada bir removeClass sarıcısı var:

$.fn.queueRemoveClass = function(className) {
    this.queue('fx', function(next) {
        $(this).removeClass(className);
        next();
    });
    return this;
};

Şimdi böyle şeyler yapabilirsiniz - 1 saniye bekleyin, ekleyin .error, 3 saniye bekleyin, kaldırın .error:

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

jQuery'nin CSS manipülasyonu sıraya alınmaz, ancak bunu yaparak 'fx' kuyruğunda yürütülmesini sağlayabilirsiniz:

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

SetTimeout'u çağırmakla aynı şey ama bunun yerine jQuery'nin kuyruk mekanizmasını kullanıyor.

Elbette jQuery'yi bu şekilde genişletirseniz daha basit olurdu:

$.fn.addClassDelay = function(className,delay) {
    var $addClassDelayElement = $(this), $addClassName = className;
    $addClassDelayElement.addClass($addClassName);
    setTimeout(function(){
        $addClassDelayElement.removeClass($addClassName);
    },delay);
};

bundan sonra bu işlevi addClass gibi kullanabilirsiniz:

$('div').addClassDelay('clicked',1000);

Gecikme bir kuyrukta çalışır. ve bildiğim kadarıyla css manipülasyon (animate dışında) sıraya alınmaz.

delayhiçbiri kuyruk işlevi üzerinde çalışmaz, bu nedenle kullanmalıyız setTimeout().

Ve bir şeyleri ayırmanıza gerek yok. Tek yapmanız gereken her şeyi bir setTimeOutyönteme dahil etmek:

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

Bunu dene:

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

Bu basit ok işlevini deneyin:

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