Discussion :

[tom6821]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[tom6821]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

[danielhagnoul]

Bonsoir

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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).

[tom6821]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 .

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... ?