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 :
.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 :
.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 :
.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 :
.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 :
.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 :
.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 :
<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').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 '?' :
<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').fadeIn(1000, function() {
alert('!');
});
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000, function() {
alert('?');
});
});
