¿Puedo retrasar jQuery addClass?

Question

¿Hay alguna manera de retrasar el addClass() de jQuery? Por ejemplo el código

$('#sampleID').delay(2000).fadeOut(500).delay(2000).addClass('aNewClass'); 

Cuando me carga la página, que tiene la clase 'aNewClass' que ya están en el ID 'IDMuestra'. ¿Cómo resolver este problema? Lo que quiero es que addClass ocurra después de que termine el fadeOut().

Answer 1

Lo que quiero es la addClass va a suceder después de que terminó la fadeOut().

Puede utilizar callback function to fadeOut así:

$('#sampleID').fadeOut(500, function(){ 
    $(this).addClass('aNewClass'); 
}); 

Answer 2

Debe utilizar devoluciones de llamada.

$('#sampleID').delay(2000).fadeOut(500,function(){ 
    $(this).delay(2000).addClass('aNewClass'); 
}); 

http://api.jquery.com/fadeOut/

Answer 3

No se puede hacer esto con delay, ya que sólo afecta a la cola de efectos. No "pausa" la ejecución del código posterior si no se implementa utilizando la cola.

que tiene que hacer esto con setTimeout:

$('#sampleID').delay(2000).fadeOut(500, function() { 
    setTimeout(function() { 
     $(this).addClass('aNewClass'); 
    }, 2000); 
}); 

Este utiliza el complete de devolución de llamada de fadeOut y luego establece una función para ejecutar 2 segundos en el futuro.

Answer 4

No se puede retrasar directamente una llamada addClass, sin embargo se puede si se envuelve en una llamada en cola que tiene una función como un parámetro como este

$(this).delay(2000).queue(function(){$(this).addClass('aNewClass')}); 

Ver este post: jQuery: Can I call delay() between addClass() and such?

Answer 5

también puede utilizar setTimeout, con la transición CSS:

setTimeout(function() { 
    $('#sampleID').addClass('aNewClass'); 
}, 2000); 

Y el CSS

#sampleID { 
transition: opacity 1s ease; 
opacity: 0; 
} 

#sampleID.aNewClass { 
opacity: 1; 
}