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 :

javascript.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 :

javascript.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 :

javascript.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 :

javascript.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é :

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

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

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

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

Voir aussi