Discussion :

[Invité]

Bonjour,

Je souhaite faire clignoter un texte juste après que l'utilisateur ai fait son choix dans une liste déroulante (Je ne suis pas très calé en Javascript).

Code :

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

1
2
3
4
 
 $(".accueil-select").change(function(){
$("#texte-clignotant-2").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400);   
});

Code :

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

1
2
3
4
5
6
7
8
 
<select onchange="document.accueilNaissance.submit();" name="naissance" class="accueil-select">
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
</select>
 
<p id="texte-clignotant-2" class="texte-6">Cotisation mensuelle TTC :</p>

Le problème c'est que ça ne fonctionne pas. Si je mets une alert() à la place de la ligne (ligne 3) qui doit faire clignoter le texte, elle s'allume puis s'éteint en une fraction de seconde. Je n'ai aucun message d'erreur dans la console de Firebug.

Comment faire clignoter Cotisation mensuelle TTC : juste après que l'utilisateur ai fait son choix ?

Merci de votre aide

[danielhagnoul]

Bonjour

Code HTML :

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

1
2
3
4
5
6
7
<select name="naissance" class="accueil-select">
    <option value="1980">1980</option>
    <option value="1981">1981</option>
    <option value="1982">1982</option>
</select>
 
<p id="texte-clignotant-2" class="texte-6">Cotisation mensuelle TTC :</p>

Code JS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$( ".accueil-select" ).on( "change", function(){
 
    // $( ".accueilNaissance" ).trigger( "submit" ); // ??
 
    // http://api.jquery.com/queue/
 
    $( "#texte-clignotant-2" ).queue( function(){
 
        $( this )
            .fadeOut( 800 )
            .fadeIn( 800 )
            .fadeOut( 400 )
            .fadeIn( 400 )
            .dequeue();
    });
 
});

[Invité]

Je te remercie pour ton aide.

J'ai modifié le code mais le problème c'est que je dois soumettre le formulaire après le clignotement du texte.

J'ai fait comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
$( ".accueil-select" ).on( "change", function(){
 
	 $( "#texte-clignotant-2" ).queue( function(){
 
		 $( this )
			 .fadeOut( 800 )
			 .fadeIn( 800 )
			 .fadeOut( 400 )
			 .fadeIn( 400 )
			 .dequeue();
		});
 
	 $( "form[name=accueilNaissance]" ).trigger( "submit" );
 
});

ou

Code :

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

1
2
3
4
5
 
$( ".accueil-select" ).on( "change", function(){
	$("#texte-clignotant-2").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400);
       $( "form[name=accueilNaissance]" ).trigger( "submit" );
});

Le code du formulaire et le texte qui doit clignoter

Code :

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

1
2
3
4
5
6
7
8
 
<select name="naissance" class="accueil-select">
    <option value="1980">1980</option>
    <option value="1981">1981</option>
    <option value="1982">1982</option>
</select>
 
<p id="texte-clignotant-2" class="texte-6">Cotisation mensuelle TTC :</p>

Comment soumettre le formulaire juste après le clignotement du texte ?

Merci

[danielhagnoul]

Bonsoir

Je n'arrive pas à trouver comment agir seulement après la fin de la dernière animation dans la queue "fx". J'ai été obligé de me rabattre sur setTimeout().

Code HTML :

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

1
2
3
4
5
6
7
8
9
<form name="accueilNaissance"></form>
 
<select name="naissance" class="accueil-select">
    <option value="1980">1980</option>
    <option value="1981">1981</option>
    <option value="1982">1982</option>
</select>
 
<p id="texte-clignotant-2" class="texte-6">Cotisation mensuelle TTC :</p>

Code JS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$( "form[name='accueilNaissance']" ).on( "submit", function(){
 
    console.log( "submit form" );
 
    return false; // bloque le submit
});
 
$( ".accueil-select" ).on( "change", function(){
 
    var delay = 800;
 
    $( "#texte-clignotant-2" ).queue( function(){
        $( this )
            .fadeOut( delay )
            .fadeIn( delay )
            .fadeOut( delay/2 )
            .fadeIn( delay/2 )
            .dequeue();
 
 
        setTimeout(function(){
            $( "form[name='accueilNaissance']" ).trigger( "submit" );
        }, ( 3 * delay + 100 ) );
    });
 
});

[NoSmoking]

Bonsoir,
et un truc du style

Code :

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

1
2
3
4
5
6
7
8
9
$( this )
  .fadeOut( 800 )
  .fadeIn( 800 )
  .fadeOut( 400 )
  .fadeIn( 400 )
  .queue( function(){
      alert('The End!')  // le trigger ici
     })
   .dequeue();

[danielhagnoul]

J'ai trouvé mieux, la méthode .fadeToggle( options ) : http://api.jquery.com/fadeToggle/

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$( ".accueil-select" ).on( "change", function(){
    $( "#texte-clignotant-2" )
        .fadeToggle({
            "duration" : 1200,
            "queue" : "textQueue"
        })
         .fadeToggle({
            "duration" : 1200,
            "queue" : "textQueue"
        })
        .fadeToggle({
            "duration" : 1200,
            "queue" : "textQueue"
        })
        .fadeToggle({
            "duration" : 1200,
            "queue" : "textQueue"
        })
       .fadeToggle({
            "duration" : 1200,
            "queue" : "textQueue",
            "complete" : function(){
                $( "form[name='accueilNaissance']" ).trigger( "submit" );
            }
        })
        .dequeue( "textQueue" );
});