Méthode slideDown

La méthode slideDown affiche de manière fluide les éléments cachés en les déroulant du haut vers le bas. Les éléments peuvent être cachés à l'aide de la méthode slideUp.

Syntaxe

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

.slideDown(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 :

.slideDown('slow' ou 'fast');

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

.slideDown();

Il est également possible de passer une fonction d'adoucissement en deuxième paramètre, ainsi qu'une fonction de callback en troisième - elle s'exécutera après l'animation. Les deux paramètres sont optionnels :

.slideDown(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 :

.slideDown(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'adoucissement :

.slideDown( {duration: 600, easing: easeInSine} );

Exemple

Après un clic sur le bouton, affichons de manière fluide un paragraphe caché à l'aide de la méthode slideDown. En passant le mot-clé slow, nous définirons la vitesse sur 600ms. Après la fin de l'animation, affichons dans la console 'Animation complete' :

<button>show text</button>
<p style="display: none">text</p>

$('button').click(function() {
	$('p').slideDown('slow', function() {
		console.log('Animation complete')
	});
});

Voir aussi

méthode slideUp,
qui cache de manière fluide les éléments
méthode slideToggle,
qui alterne l'affichage/le masquage fluide des éléments
méthode fadeIn,
qui affiche de manière fluide les éléments cachés, en les rendant opaques
méthode show,
qui affiche de manière fluide les éléments