delay () y fadeOut () no retrasan attr () en la cola

Question

lo que está mal en este código? Estoy tratando de conseguir este efecto: fadeOut(500) y attr('class','myClass') un retraso de 600 millisecs .. entonces delay(600) de nuevo, y fadeIn(500). Los retrasos se producen correctamente, pero el attr() no se está retrasando, que se activa cuando #myDiv todavía está desapareciendo! : '(

$('#myDiv').fadeOut(500)
           .delay(600)
           .attr('class','myClass')
           .delay(600)
           .fadeIn(500);  

Answer 1

El .delay() sólo afecta a la cola de animación o fx (a menos que se especifique otra cola en concreto). Tenga en cuenta que el encadenamiento y las colas son 2 conceptos muy diferentes, el encadenamiento continúa el uso del mismo conjunto de jQuery, pero eso es una cosa totalmente diferente que cualquier colas de sucesos en los elementos de ese conjunto.

Para que el .attr() llamada afectada, hay que añadirlo como una devolución de llamada a la misma cola utilizando .queue() , como esto:

$('#myDiv').fadeOut(500)
           .delay(600)
           .queue(function(next) { $(this).attr('class','myClass'); next(); })
           .delay(600)
           .fadeIn(500); 

Tenga en cuenta también que hay .addClass() , .removeClass() y .toggleClass() disponibles que pueden hacer de esto un poco más limpia:)