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

Question

Algo tan simple como: no parece trabajar

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

. ¿Cuál sería la alternativa más fácil?

Answer 1

Se puede crear un nuevo elemento de cola para hacer su eliminación de la clase:

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

o utilizando el método dequeue:

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

El motivo por el que necesita llamar al next o dequeue es para que jQuery sepa que ha terminado con este elemento en cola y que debe pasar al siguiente.

Answer 2

El retraso funciona 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

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 4

Prueba esto:

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

Answer 5

manipulación CSS jQuery no está en la cola, pero se puede hacer que sea ejecutado en el interior de la cola 'FX' haciendo:

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

Muy mismo que setTimeout llamando pero en su lugar usa el mecanismo de cola de jQuery.

Answer 6

Por supuesto que sería más sencillo si se amplía jQuery así:

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

después de que se puede utilizar esta función como addClass:

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

Answer 7

Sé que esto se trata de una muy antigua publicar pero he combinado algunas de las respuestas en una función de envoltorio jQuery que admite el encadenamiento. Espero que beneficia a alguien:

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

Y aquí está un envoltorio removeClass:

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

Ahora usted puede hacer cosas como esta - espere 1 segundo, añadir .error, espere 3secs, retire .error:

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