Evénement change() sur un select

Version imprimable

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:

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

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

Bonjour

Code:

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:

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

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:

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

Code:

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:

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

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:

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:

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

Bonsoir,
et un truc du style

Code:

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

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

Code:

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

Tout à fait ou encore mettre la fonction dans le dernier fadeIn

Code:

1
2
3
4
5
6
7
8
$(this).
    fadeOut(800).
    fadeIn(800).
    fadeOut(400).
    fadeIn(400, function () {
        $( "form[name='accueilNaissance']" ).trigger( "submit" );
    })
    .dequeue();

12/01/2014, 00h02
danielhagnoul

Citation:

Envoyé par NoSmoking

Tout à fait ou encore mettre la fonction dans le dernier fadeIn

Aussi ! Mais j'ai une préférence pour fadeToggle( options ) souple et aux multiples possibilités.

Je ne sais pas pourquoi, au départ, je me suis focalisé sur le décompte des animations dans la queue avec var tab = $( selector ).queue( "queueName" ) et tab.length qui vaut 0 lorsque la queue d'animation est vide. C'était chercher la difficulté inutilement.
13/01/2014, 09h17
Invité

Merci à vous, ça fonctionne bien :ccool: