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

Algo tan simple como:

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

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

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.

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); 

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');

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.

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.

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); 

Prueba esto:

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

delay no funciona en ninguna función de cola, por lo que deberíamos usar setTimeout() .

Y no necesitas separar las cosas. Todo lo que necesita hacer es incluir todo en un método setTimeOut :

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