Fonction .queue() pour animer deux éléments différents

Version imprimable

Bonjour,

j'essaie d'appliquer deux animations FadeOut et FadeIn sur des paragraphes contenus dans une div.

La difficulté vient du fait que l'animation ne porte pas sur les mêmes éléments. Je souhaiterais que lorsque l'image est cliquée, tous les paragraphes contenus dans la div disparaissent, puis qu'un paragraphe spécifique soit affiché. Du coup il réalise les deux animations en même temps, et je voudrais qu'elle soit l'une après l'autre...
Code:

1 2 3 4 5 6 7 8 9 jQuery(document).ready(function () { $("img#image-1").click(function(){ $("div#contenu p").fadeOut(3000).queue( function() { $("p#paragraphe-fadein").fadeIn(3000); $(this).dequeue(); }); }) })
Merci d'avance !

J'ai vu sur le site officiel de Jquery que la méthode .FadeIn pouvait recevoir une fonction exécutée à la fin de l'animation, en deuxième argument :
Code:

1 2 3 4 5 6 7 jQuery(document).ready(function () { $("img#image-2").click(function() { $("div#contenu p").fadeOut(3000, function() { $("p#paragraphe-fadein").fadeIn(3000); }); }); });
Néanmoins ça ne fonctionne pas non plus. Je n'ai plus aucune réaction quand je clique sur mon image, je ne vois vraiment pas où j'ai pu faire une erreur...

31/10/2013, 20h11
danielhagnoul
Bonsoir
Code:

1 2 3 4 5 $( "#image-2" ).on( "click", function(){ $( "#contenu p").fadeOut( 3000, function(){ $( "#paragraphe-fadein" ).fadeIn( 3000 ); }); });
Le code ci-dessus est correct sous réserve que les sélecteurs existent et correspondent à ce qui est souhaité. Impossible de le savoir et de tester sans le contexte (CSS, HTML).

Bonjour,

merci pour ta réponse ! le code que tu m'as donné fonctionne bien, mais il y a juste un fonctionnement un peu bizarre : j'ai un paragraphe qui est affiché par défaut dans ma div "contenu". Lorsque je clique une première fois sur mon "image-2", la disparition du paragraphe initial et l'affichage du deuxième paragraphe se font simultanément. L'effet désiré (d'abord le FadeOut, puis le FadeIn, l'un après l'autre) n'est obtenu que lors des clics suivants sur l'image. (disparition et apparition l'une après l'autre du paragraphe "paragraphe-fadein").

Ci-dessous une copie du code HTML + Script pour y voir plus clair... Merci d'avance pour votre aide !
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <img id="image-2" style="vertical-align: middle;" alt="" src="http://www.siteweb.fr/image-2.jpg" /></a> <script type="text/javascript"> jQuery( "#image-2" ).on( "click", function(){ $( "#contenu p").fadeOut( 3000, function(){ $( "#paragraphe-fadein" ).fadeIn( 3000 ); }); }); </script> <div id="contenu" style="border: 1px solid;"> <p id="texte-depart">Cliquez sur l'image "Image-2" pour faire apparaître le texte !</p> <p id="paragraphe-fadein" style="display: none;">Apparition du texte FadeIn</p>

04/11/2013, 11h37
danielhagnoul
Bonjour

Pour le choix de l'animation, c'est la vôtre, j'ai juste repris votre code du message numéro 1.

À la lecture de vos commentaires et avec la possibilité de tester, il me semble que ce que vous recherchez c'est plutôt :
Code:

1 2 3 4 5 6 7 8 $( function(){ $( "#image-2" ).on( "click", function(){ $( "#contenu p" ).hide(); $( "#paragraphe-fadein" ).fadeIn( 2000 ); }); });
04/11/2013, 12h04
tom6821

Bonjour,

Merci pour votre réponse ! Effectivement l'utilisation de .hide() règle le problème car la méthode est "instantanée" du coup plus de problème d'animations simultanées ou non 8-).

J'aurais préféré utiliser la méthode FadeOut pour faire disparaître le contenu initial pour des raisons esthétiques... Ce qui est bizarre c'est qu'un paragraphe, qui était en mode "display:none" et sur lequel on a appliqué le fadeIn(), lorsqu'on reclique sur l'image la "non-simultanéité" / l'ordre voulu / fadeOut() puis fadeIn() est bien respecté.

Je me demande quelle peut être la propriété (CSS peut-être) qui résulte de l'application de la méthode FadeIn (j'ai tenté de rajouter "display: block;" et "opacity: 1") qui fait que lorsqu'on réitère l'action la deuxième fois, cela fonctionne...

Ou alors une autre syntaxe plus explicite / plus contraignante que la fonction de callback de la méthode pour vraiment forcer les deux animations à s'éxécuter de manière successive... ?

J'ai continué mes tests en essayant de faire apparaître d'autres paragraphes, en cliquant sur d'autres éléments (L'objectif final étant de faire apparaître de manière dynamique des légendes lorsque l'utilisateur clique sur des éléments d'un tableau...)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <script type="text/javascript">// <![CDATA[ jQuery(document).ready( function() { jQuery( "#textedepart" ).fadeIn(2000); jQuery( "#texte1" ).on( "click", function(){ $( "#contenu p").fadeOut( 2000, function() { $( "#paragraphe-fadein" ).fadeIn( 2000 ); }); }); jQuery( "#texte2" ).on( "click", function(){ $( "#contenu p").fadeOut( 2000, function() { $( "#paragraphe-fadein2" ).fadeIn( 2000 ); }); }); jQuery( "#texte3" ).on( "click", function(){ $( "#contenu p").fadeOut( 2000, function() { $( "#paragraphe-fadein3" ).fadeIn( 2000 ); }); }); }); // ]]></script>
En réalité précédemment j'avais bien mes animations qui étaient réalisées l'une après l'autre car il s'agissait du même élément / paragraphe.

Quand je réalise les tests avec 3 éléments, comme dans le code ci-dessus, les animations fade out et in ont bien lieu simultanément... (et j'ai un autre bug : une fois l'élément affiché, il disparaît et réapparait une fois de plus) :calim2:

04/11/2013, 16h24
danielhagnoul

Réponse au message n° 6 : il n'y a pas de mystère, c'est le résultat du sélecteur $( "#contenu p" ) ! On agit sur tous les tags "p" contenus dans l'élément du DOM ayant l'ID "contenu".
04/11/2013, 17h57
tom6821

Bonsoir !

Merci pour tes réponses :ccool:.

J'ai finalement opté pour l'utilisation de la méthode .hide() comme tu me l'as conseillé.

Après de nombreuses recherches :aie:, toujours pas trouvé de moyen "simple" de faire des animations séquentielles sur des éléments du DOM distincts.

J'ai trouvé des solutions qui consistaient à créer une queue personnalisée sur l'élément <body> de la page, ou à utiliser la méthode .animate() mais ça me paraissait assez compliqué...

La solution évoquée au message 3 et consistant à utiliser la fonction de Callback / pour déclencher l'instruction suivante une fois seulement que la première animation est terminée n'a pas fonctionné chez moi (sauf erreur possible de syntaxe, j'ai vu dans la documentation de la méthode .fadeOut() sur le site de jQuery qu'il était possible d'avoir un argument supplémentaire (en plus de la duration et de la fonction de Callback) pour la méthode, la fonction de Callback serait donc à placer en 3ème position dans la liste des arguments... ?