Jquery haciendo cola de animaciones

Question

Tengo varias animaciones que quiero realizar en diferentes objetos en el dom.

Quiero que ocurran en orden.

no quiero hacerlo de esta manera:

$('#first').show(800, function() 
{ $('#second').show(800, function() {...etc...}); 

Quiero añadir todas mis animaciones (y funciones de uso intensivo de CPU) a algún tipo de objeto de cola que se asegurará de que se ejecutan secuencialmente.

Answer 1

No estoy seguro de por qué no desea utilizar el método que describió. Si su puramente desde un punto de vista organizativo que no tiene que utilizar funciones anónimas

function showFirst() { 
    $('#first').show(800, showSecond); 
} 

function showSecond() { 
    $('#second').show(800, showThird); 
} 

function showThird() { 
    $('#third').show(800); 
} 

function startAnimation() { 
    showFirst(); 
} 

Answer 2

Mira la documentation para efectos jQuery. Las cosas sobre queuing deben hacer lo que necesita.

Answer 3

Acabo de utilizar este complemento, http://plugins.jquery.com/project/timers, el otro día para hacer algo similar. Básicamente iterar a través de todos los elementos dom coincidentes y luego realizar una animación cada uno cuando el índice * cuenta su milisegundo.

El código fue algo como esto:

HTML:

<div id="wrapper"> 
    <div>These</div> 
    <div>Show</div> 
    <div>In</div> 
    <div>Order</div> 
</div> 

jQuery

$("#wrapper div").foreach(function(i) { 
    i = i + 1; 
    $(this).oneTime(800 * i, "show", function() { 
     $(this).show(); 
    }); 
}); 

Answer 4

Esto también funcionaría.

  $('#first').show(800); 
      setTimeout("$('#second').show(800)", 800); 
      setTimeout("$('#third').show(800)", 1600); 
      setTimeout("$('#forth').show(800)", 2400); 

Sé que no es puramente secuencial, pero me parece que hace que sea fácil de leer y le permite configurar de animaciones con más flexability.

Nota: que debe citar el código que desea ejecutar. No he usado ninguna comilla doble en el código anterior pero si lo hiciera, las habría escapado de la siguiente manera.

  $('#first').animate({"width":"100px"}, 500); 
      setTimeout("$('#second').animate({\"width\":\"100px\"}, 500)", 800); 
      setTimeout("$('#third').animate({\"width\":\"100px\"}, 500)", 1600); 
      setTimeout("$('#forth').animate({\"width\":\"100px\"}, 500)", 2400); 

Por lo general, puede evitar esto al alternar las comillas que utiliza, pero aunque vale la pena mencionarlo.

ACTUALIZACIÓN: Aquí hay otra opción, y es también vale la pena mirar jQuery promete here

  $('#first').show(800); 
      $('#second').delay(800).show(800); 
      $('#third').delay(1600).show(800); 
      $('#forth').delay(2400).show(800);