Méthode fadeIn
La méthode fadeIn affiche progressivement les éléments
cachés en les rendant opaques. Cacher
les éléments est possible avec la méthode
fadeOut,
en les rendant transparents.
Syntaxe
Affichage pendant une durée donnée,
400ms par défaut :
.fadeIn(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 :
.fadeIn('slow' ou 'fast');
Si aucun paramètre n'est spécifié - il n'y aura pas d'animation, les éléments apparaîtront instantanément :
.fadeIn();
Il est également possible de passer une fonction d'adoucissement 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 :
.fadeIn(durée, [fonction d'adoucissement], [fonction de callback]);
Il est possible de passer différentes options à la méthode, sous la forme d'un objet JavaScript, contenant des paires clé: valeur :
.fadeIn(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 est disponible pour la méthode
animate. Par exemple,
définissons la durée et la fonction d'adoucissement :
.fadeIn( {duration: 800, easing: easeInSine} );
Exemple
Dans l'exemple suivant, lors d'un clic sur le bouton
#hide l'élément #test sera
caché en utilisant la méthode fadeOut,
et lors d'un clic 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('?');
});
});
