Animez les Divs les uns après les autres avec JQuery

Question

En essayant d'animer plusieurs divs, en s'encastrant, l'un après l'autre dans l'ordre quand la page se charge. Je veux aussi le faire à l'envers, disparaissant en séquence, quand je clique pour aller à une autre page. Comment puis-je mettre en place dans jquery?

Answer 1

un peu difficile de vous donner une Par exemple, il y a tellement de façons de s'animer dans jQuery, mais voici un exemple simple. Animer deux <div> s, l'un après l'autre (sur la charge de la page):

Voir un exemple de travail ici: 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); 
    } 
); 

Voici ce qui se passe:

• Deux <div> s sont sur la page avec CSS opacity: 0
• Lorsque la page est chargée, le <div> avec id animation-one est animée sur une période de 700 millisecondes de l'opacité 0 à l'opacité 1 .
• Après l'animation du animation-one est terminée, une autre <div> (avec id animation-two) présente une animation a démarré d'une manière similaire.

---

Maintenant, la décoloration <div> s est similaire.Je suis supposé que votre lien dirige simplement vers une autre page, donc je l'ai suspendu la suite de ce lien jusqu'à ce que l'animation est terminée:

Cela suppose que vous avez un lien <a> avec un id de next-page, mais vraiment il peut être un sélecteur:

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; 
       }); 
    }) 
}); 

Voici ce qui est happe ning:

• Lorsque le lien avec l'ID next-page est cliqué, une séquence d'animation similaire à celle décrite ci-dessus se produit, mais en sens inverse.
• Après la dernière animation, le lien est correctement suivi.

Je pense que voir l'exemple dans le lien ci-dessus devrait aider. Aussi, assurez-vous et consultez les documents pour animate.

Espérons que ça aide!

Edit: Ajout d'un lien vers un autre exemple depuis l'OP veut animer plusieurs <div> s à la fois: http://jsfiddle.net/andrewwhitaker/n3GEB/. Cela déplace le code commun dans les fonctions et, espérons-le, rend l'exemple plus facile à lire.

Answer 2

Notez que les fonctions d'animation jQuery prennent un rappel comme paramètre final. Cette fonction est appelée lorsque l'animation est terminée. Vous commencerez à animer la prochaine DIV dans ce rappel. Une autre option serait fxQueues.

Il n'existe pas de méthode parfaite pour inverser l'animation lorsque vous quittez la page. Vous pouvez le faire pour des liens sur votre page en faisant quelque chose le long des lignes de:

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

(Notez que je ne garantis pas que cela fonctionne, il est juste pseudocode)

Answer 3

Je voudrais regarder en utilisant des rappels et des files d'attente.

Jetez un oeil à ceci:

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

Hope this est un point dans la bonne direction pour vous.