2010-05-10 7 views
10

¿Qué hay de malo en este código? Estoy tratando de obtener este efecto: fadeOut(500) y attr('class','myClass') retrasado en 600 milisegundos .. luego delay(600) nuevamente, y fadeIn(500). Los retrasos ocurren correctamente, pero el attr() no se retrasa, ¡se dispara cuando #myDiv aún se está desvaneciendo! :. '(delay() y fadeOut() no retrasan attr() en la cola

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

Respuesta

25

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

para que la llamada .attr() afectada, hay que añadirlo como una devolución de llamada a la misma cola usando .queue(), así:.

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

También tenga en cuenta que hay .addClass(), .removeClass() y .toggleClass() métodos disponibles que pueden hacer que este limpiador un poco :)

+1

Creo que debería llamar '$ (this) .dequeue()' dentro de la función. De los documentos: * Tenga en cuenta que cuando agreguemos una función con .queue(), deberíamos asegurarnos de que .dequeue() sea llamado para que se ejecute la siguiente función en línea. * De todos modos +1;) –

+0

@Felix - Woops I ' m generalmente llamando a esto como el último elemento en la cola, buena captura :) –

+0

Hola Nick, muchas gracias por tu respuesta. Funciona como dices, sin embargo, las siguientes llamadas en la cola ya no funcionan .. :( EDIT solo vio el comentario de Félix ... muchas gracias a los dos chicos – Luca