jQuery: Czy mogę wywołać funkcję delay () między addClass () a takimi?

Coś tak prostego, jak:

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

nie wydaje się działać. Jaka byłaby najłatwiejsza alternatywa?

Możesz utworzyć nową pozycję w kolejce, aby usunąć klasę:

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

Lub używając metody usuwania z kolejki :

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

Powodem, dla którego musisz zadzwonić nextlub dequeuejest to, aby powiadomić jQuery, że skończyłeś z tym elementem w kolejce i że powinien przejść do następnego.

AFAIK, metoda opóźnienia działa tylko w przypadku numerycznych modyfikacji CSS.

Do innych celów JavaScript zawiera metodę setTimeout:

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

Wiem, że to bardzo stary post, ale połączyłem kilka odpowiedzi w funkcję opakowującą jQuery, która obsługuje łączenie. Mam nadzieję, że to komuś przyniesie korzyści:

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

A oto opakowanie removeClass:

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

Teraz możesz robić takie rzeczy - poczekaj 1sek, dodaj .error, poczekaj 3sek, usuń .error:

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

Manipulacja CSS jQuery nie jest umieszczana w kolejce, ale możesz ją wykonać wewnątrz kolejki `` fx '', wykonując:

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

Całkiem to samo, co wywołanie setTimeout, ale zamiast tego używa mechanizmu kolejki jQuery.

Oczywiście byłoby łatwiej, gdybyś rozszerzył jQuery w ten sposób:

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

potem możesz użyć tej funkcji, takiej jak addClass:

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

Opóźnienie działa na kolejce. i o ile wiem, manipulacja css (inna niż przez animate) nie jest w kolejce.

delaynie działa na żadnej funkcji kolejki, więc powinniśmy użyć setTimeout().

I nie musisz oddzielać rzeczy. Wszystko, co musisz zrobić, to uwzględnić wszystko w setTimeOutmetodzie:

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

Spróbuj tego:

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

Wypróbuj tę prostą funkcję strzałki:

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