Animate Divs One Right After the Other con Jquery

Question

Im tratando de animar múltiples divs, desvaneciéndose, uno tras otro en secuencia cuando se carga la página. También quiero hacerlo a la inversa, desvaneciéndome en secuencia, cuando hago clic para ir a otra página. ¿Cómo hago para configurar esto en jquery?

Answer 1

un poco difícil de darle una ejemplo, ya que hay tantas maneras de animar en jQuery, pero aquí hay un ejemplo simple. Animación de dos <div> s, uno tras otro (en la carga de la página):

Ver ejemplo de trabajo aquí: http://jsfiddle.net/andrewwhitaker/p7MJv/

HTML:

<div id="animation-one">Hello!</div> 
<div id="animation-two">Jquery Animate!</div> 

CSS:

#animation-one, 
#animation-two 
{ 
    opacity:0; 
    top: 30px; 
    width: 400px; 
    height: 100px; 
    background-color:#00CCCC; 
    font-size:35pt; 
    position:absolute; 
} 

#animation-one 
{ 
    background-color:#CCCC33; 
    top:130px; 
} 

JavaScript:

$("#animation-one").animate({ 
    opacity:1.0}, 700, 
    function() { 
     // Callback function: This is called when 'animation-one' 
     // is finished. 
     $("#animation-two").animate({ 
      opacity: 1.0 
     }, 700); 
    } 
); 

Esto es lo que está pasando:

• Dos <div> s están en la página con CSS opacity: 0
• Cuando se carga la página, el <div> con id animation-one está animado por un período de 700 milisegundos de la opacidad de 0 a opacidad 1
• Después de que la animación de animation-one ha finalizado, otra <div> (con id animation-two) tiene una animación iniciada de forma similar.

---

Ahora, desapareciendo la <div> s es similar.He asumido que su enlace simplemente dirige a otra página, por lo que he suspendido el seguimiento de ese enlace hasta que la animación se terminó:

Esto supone que tiene un enlace <a> con un id de next-page, pero realmente puedo ser cualquier selector:

HTML:

<a id="next-page" href="http://www.google.com">Google</a> 

JavaScript:

$("#next-page").click(function($event) { 
    $event.preventDefault(); 
    var href = $(this).attr("href"); 

    $("#animation-two").animate({ 
     opacity: 0}, 700, 
     function() { 
      // Callback function: This is called when 'animation-two' 
      // is finished. 
      $("#animation-one").animate({ 
       opacity: 0}, 700, 
       function() { 
        // Direct the user to the link's intended 
        // target. 
        window.location = href; 
       }); 
    }) 
}); 

Esto es lo que Happe Ning:

• Cuando se hace clic en el enlace con id next-page, una secuencia de animación similar al descrito anteriormente se produce, pero a la inversa.
• Después de la última animación, el enlace se sigue correctamente.

Creo que ver el ejemplo en el enlace de arriba debería ayudar. Además, asegúrese de consultar los documentos para animate.

Espero que ayude!

Editar: Adición de un enlace a otro ejemplo ya que el PO quiere animar múltiples <div> s a la vez: http://jsfiddle.net/andrewwhitaker/n3GEB/. Esto mueve el código común a las funciones y, con suerte, facilita la lectura del ejemplo.

Answer 2

Tenga en cuenta que las funciones de animación jQuery toman una devolución de llamada como el parámetro final. Esta función se llama cuando la animación está completa. Comenzarías a animar el siguiente DIV en esta devolución de llamada. Otra opción sería fxQueues.

No hay una manera perfecta de invertir la animación al salir de la página. Se podía hacerlo por enlaces de una página haciendo algo en la línea de:

$("a").click(function() 
{ 
    var target = $(this).href; 
    // Do animation 
    // In the final completion callback, do 
    window.location.href = target; 
}); 

(Nota no garantizo que esto funciona, es sólo pseudocódigo)

Answer 3

Me gustaría ver el uso de devoluciones de llamada y colas.

Tome un vistazo a esto:

jQuery queue events http://api.jquery.com/queue/

Esperanza este es un punto en la dirección correcta para usted.