Méthode toggle

La méthode toggle alterne l'affichage et le masquage fluides des éléments. Si un élément est affiché, il sera masqué et vice versa.

Syntaxe

Affichage pendant une durée donnée en millisecondes, 400ms par défaut :

.toggle(durée);

La durée peut être spécifiée non seulement en millisecondes, mais aussi avec les mots-clés slow (600ms) et fast (200ms), plus la valeur est grande, plus l'animation est lente :

.toggle('slow' ou 'fast');

Le paramètre display peut recevoir les valeurs true ou false. Si true, l'élément sera uniquement affiché, false - masqué :

.toggle(display);

Si aucun paramètre n'est spécifié - il n'y aura pas d'animation, les éléments seront affichés/masqués instantanément :

.toggle();

Il est également possible de passer une fonction d'accélération en deuxième paramètre, ainsi qu'une fonction de callback en troisième - qui s'exécutera après l'animation. Les deux paramètres sont facultatifs :

.toggle(durée, [fonction d'accélération], [fonction de callback]);

On peut simplement passer une fonction de callback en deuxième paramètre facultatif - elle s'exécutera après l'animation :

.toggle(durée, [fonction de callback]);

Il est possible de passer diverses options à la méthode, sous la forme d'un objet JavaScript, contenant des paires clé: valeur :

.toggle(options);

Un tel objet peut contenir les paramètres et fonctions suivants - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. La description de ces paramètres est disponible pour la méthode animate. Par exemple, définissons la durée et la fonction d'accélération :

.toggle( {duration: 800, easing: easeInSine} );

Exemple

Après un clic sur le bouton, affichons progressivement un paragraphe masqué à l'aide de la méthode toggle. En passant le mot-clé slow, nous définissons la vitesse sur 600ms. Lors d'un nouveau clic - masquage :

<button>show text</button>
<p style="display: none">text</p>

$('button').click(function() {
	$('p').toggle('slow');
});

Voir aussi

la méthode fadeToggle,
qui modifie la transparence des éléments
la méthode slideToggle,
qui alterne l'affichage et le masquage fluides des éléments
la méthode show,
qui affiche progressivement les éléments
la méthode hide,
qui masque progressivement les éléments