w3schools - jQuery: ¿Puedo llamar a delay() entre addClass() y tal?

jquery settimeout

Question

Algo tan simple como:

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

no parece funcionar ¿Cuál sería la alternativa más fácil?

Answer 1

AFAIK el método de demora solo funciona para modificaciones numéricas de CSS.

Para otros fines, JavaScript viene con un método setTimeout:

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

Answer 2

El retraso opera en una cola. y, por lo que sé, la manipulación css (que no sea a través de animate) no está en cola.

Answer 3

La manipulación CSS de jQuery no está en cola, pero puedes hacerla ejecutar dentro de la cola ''fx'' haciendo:

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

Lo mismo que llamar a setTimeout pero usa el mecanismo de cola de jQuery.

Answer 4

Por supuesto, sería más simple si extiendes jQuery así:

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

después de eso puedes usar esta función como addClass:

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

Answer 5

Prueba esto:

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

Answer 6

Puede crear un nuevo elemento de cola para eliminar su clase:

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

O usando el método de dequeue :

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

La razón por la que debe llamar a next o dequeue es para que jQuery sepa que ha terminado con este elemento en cola y que debe pasar al siguiente.

Answer 7

Sé que esta es una publicación muy antigua, pero he combinado algunas de las respuestas en una función de envoltorio jQuery que admite el encadenamiento. Espero que beneficie a alguien:

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

Y aquí hay un contenedor removeClass:

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

Ahora puede hacer cosas como esta: espere 1 .error , agregue .error , espere 3 segundos, elimine .error :

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