Méthode fadeToggle

La méthode fadeToggle affiche ou masque alternativement et fluidement les éléments, en animant leur opacité.

Syntaxe

Affichage/masquage pendant une durée donnée, 400ms par défaut :

.fadeToggle(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 :

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

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

.fadeToggle();

Il est également possible de passer une fonction d'accélération (easing) en second paramètre, ainsi qu'une fonction de callback en troisième - elle s'exécutera après la fin de l'animation. Les deux paramètres sont optionnels :

.fadeToggle(durée, [fonction d'accélération], [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 :

.fadeToggle(options);

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

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

Exemple

Dans l'exemple suivant, lors du premier clic sur le bouton #toggle, l'élément avec #test sera masqué, et lors du clic suivant - affiché. Pour cela, nous utilisons la méthode fadeToggle. Nous définirons également la vitesse sur 1000ms et la valeur de la fonction d'accélération sur linear :

<button id="toggle">toggle</button>
<div id="test"></div>

#test {
	width: 200px;
	height: 200px;
	background: green;
	color: white;
	margin-top: 10px;
}

$('#toggle').on('click', function() {
	$('#test').fadeToggle(1000, 'linear');
});

Voir aussi

la méthode slideToggle,
qui alterne l'affichage/masquage fluide des éléments
la méthode fadeTo,
qui modifie l'opacité des éléments
la méthode toggle,
qui alterne l'affichage/masquage fluide des éléments
la méthode animate,
qui anime les propriétés des éléments