jQuery: posso chiamare delay () tra addClass () e simili?

Qualcosa di semplice come:

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

non sembra funzionare. Quale sarebbe l'alternativa più semplice?

È possibile creare un nuovo elemento della coda per rimuovere la classe:

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

O usando il metodo dequeue :

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

Il motivo che devi chiamare nexto dequeueè far sapere a jQuery che hai finito con questo oggetto in coda e che dovrebbe passare a quello successivo.

AFAIK il metodo delay funziona solo per le modifiche numeriche CSS.

Per altri scopi JavaScript viene fornito con un metodo setTimeout:

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

So che questo è un post molto vecchio, ma ho combinato alcune delle risposte in una funzione wrapper jQuery che supporta il concatenamento. Spero che vada a beneficio di qualcuno:

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

Ed ecco un wrapper removeClass:

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

Ora puoi fare cose come queste: attendere 1 secondo, aggiungere .error, attendere 3 secondi, rimuovere .error:

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

La manipolazione CSS di jQuery non è in coda, ma puoi farla eseguire all'interno della coda 'fx' facendo:

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

Piuttosto la stessa cosa di chiamare setTimeout ma usa invece il meccanismo di coda di jQuery.

Ovviamente sarebbe più semplice se estendi jQuery in questo modo:

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

dopodiché puoi usare questa funzione come addClass:

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

Il ritardo funziona su una coda. e per quanto ne so la manipolazione CSS (oltre che tramite animate) non è in coda.

delaynon funziona con nessuna funzione in coda, quindi dovremmo usare setTimeout().

E non è necessario separare le cose. Tutto quello che devi fare è includere tutto in un setTimeOutmetodo:

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

Prova questo:

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

Prova questa semplice funzione freccia:

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