Méthode fadeOut

La méthode fadeOut masque progressivement les éléments. Les éléments peuvent être affichés à l'aide de la méthode fadeIn, en les rendant opaques.

Syntaxe

Affichage pendant une durée définie, 400ms par défaut :

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

javascript.fadeOut('slow' ou 'fast');

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

javascript.fadeOut();

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 optionnels :

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

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

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

Exemple

Dans l'exemple suivant, lors du clic sur le bouton #hide l'élément avec #test sera masqué à l'aide de la méthode fadeOut, et sur le bouton #show - affiché, avec fadeIn. Nous définirons également la vitesse à 1000ms :

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').fadeIn(1000);
});

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

Exemple

Et dans l'exemple suivant, après la fin de l'animation lors de l'affichage de l'élément #test nous afficherons un message avec le texte '!', et lors du masquage avec le texte '?' :

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').fadeIn(1000, function() {
    alert('!');
  });
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000, function() {
    alert('?');
  });
});

Voir aussi