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?Animez les Divs les uns après les autres avec JQuery
Répondre
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 CSSopacity: 0
- Lorsque la page est chargée, le
<div>
avec idanimation-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 idanimation-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.
+1 Pour l'explication __huge__. – Fred
+1 D'accord .. :-) –
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)
Voir cette question pour un exemple de la fonction de rappel : http://stackoverflow.com/questions/668104/jquery-queueing-animations –
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.
- 1. Comment lire les fichiers audio les uns après les autres
- 2. Les curseurs jQuery se contrôlent les uns les autres
- 3. Référence des index d'éléments les uns après les autres
- 4. Comment puis-je créer plusieurs divs les uns sur les autres en utilisant CSS/jQuery?
- 5. Rendre les attributs incompatibles les uns avec les autres?
- 6. Pourquoi les abonnements interagissent les uns avec les autres?
- 7. Application web Blackberry enveloppant les divs flottants les uns sur les autres
- 8. Les appels asynchrones Javascript marchent les uns sur les autres
- 9. Problème avec le NAudio - Gérer les fichiers multipules les uns après les autres
- 10. Obtenir les valeurs des éléments qui ont été déposés les uns avec les autres avec jQuery?
- 11. Empiler les champs de saisie les uns sur les autres
- 12. Comparer des fichiers les uns aux autres
- 13. Jquery afficher les images les unes après les autres
- 14. Mod_Rewrite + Les messages AJAX ne fonctionnent pas bien les uns avec les autres?
- 15. Transfert de plusieurs fichiers les uns après les autres - java sockets
- 16. Module Drupal à utiliser pour les nœuds de référencement bidirectionnel (les uns avec les autres)
- 17. Les scripts CPython, IronPython, Jython sont-ils compatibles les uns avec les autres?
- 18. Éléments de positionnement CSS les uns à côté des autres
- 19. deux .NET exe peuvent-ils interférer les uns avec les autres?
- 20. Quelle est la meilleure façon d'aligner à gauche les boutons radio les uns sur les autres?
- 21. Ajax, Json, sélecteurs qui dépendent les uns des autres
- 22. commutation entre les divs avec jquery
- 23. Deux struct tm séparées miroir les uns des autres
- 24. xUnit ou NUnit? Quels sont les avantages et les inconvénients les uns des autres?
- 25. 2 sites mvc asp.net en conflit les uns avec les autres
- 26. Serveurs Python se battre les uns les autres avec des sockets
- 27. Plusieurs développeurs gardent CouchDB en synchronisation les uns avec les autres
- 28. deux classes contiennent des objets les uns des autres
- 29. Soustraire deux parcelles trisurf les uns des autres
- 30. Les tuples doivent-ils se sous-classer les uns les autres?
Sauf si vous voulez frustrer vos utilisateurs, n'ajoutez aucune animation entre eux en cliquant sur un lien et le chargement de la page suivante. MS transitions (http://msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx) n'a pas décollé pour une raison – micmcg