Méthode fadeTo

La méthode fadeTo modifie en douceur l'opacité d'un élément jusqu'à une valeur spécifiée, dans une plage de 0 à 1.

Syntaxe

La durée et l'opacité sont spécifiées dans toute variante d'utilisation de la méthode. Modification de l'opacité pendant un temps donné, 400ms par défaut :

.fadeTo(durée, valeur d'opacité);

Le temps peut être spécifié 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 :

.fadeTo('slow' ou 'fast', valeur d'opacité);

Il est également possible de passer une fonction callback en troisième paramètre (optionnel) - elle s'exécutera après l'animation :

.fadeTo(durée, valeur d'opacité, [fonction callback]);

Il est également possible de passer une fonction d'adoucissement et une fonction callback (paramètres optionnels) - s'exécutera après l'animation :

.fadeTo(durée, valeur d'opacité, [fonction d'adoucissement], [fonction callback]);

Exemple

Dans l'exemple suivant, à l'aide de la méthode fadeTo lorsqu'on clique sur le bouton #hide l'élément #test sera masqué en réduisant son opacité à 0.5, et sur #show - sera affiché :

<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>

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

$('#show').on('click', function() {
	$('#test').fadeTo(1000, 1);
});

$('#hide').on('click', function() {
	$('#test').fadeTo(1000, 0.5);
});

Voir aussi

la méthode fadeToggle,
qui modifie l'opacité des éléments
la méthode fadeIn,
qui affiche en douceur les éléments cachés, en les rendant opaques
la méthode animate,
qui anime les propriétés des éléments