Méthode slideUp

La méthode slideUp masque de manière fluide les éléments en les remontant de bas en haut. Afficher les éléments est possible avec la méthode slideDown.

Syntaxe

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

.slideUp(durée);

Le temps peut être défini 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 :

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

.slideUp();

Il est également possible de passer une fonction d'adoucissement (easing) 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 :

.slideUp(durée, [fonction d'adoucissement], [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 :

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

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

Exemple

Après un clic sur le bouton, masquons de manière fluide le div parent qui contient l'input et le bouton, à l'aide de la méthode slideUp (ce div sera trouvé à l'aide de la méthode parent). En passant le mot-clé slow, nous définirons la vitesse à 600ms. Dans le div avec #test nous afficherons l'inscription 'Text is hidden' :

<div>
	<button>hide text</button>
	<input type="text" value="aaa">
</div>
<div id="test"></div>

$('button').click(function() {
	$(this).parent().slideUp('slow', function() {
		$('#test').text('Text is hidden');
	});
});

Voir aussi

la méthode slideDown,
qui affiche les éléments de manière fluide
la méthode slideToggle,
qui alterne l'affichage/masquage fluide des éléments
la méthode fadeOut,
qui masque les éléments de manière fluide en les rendant transparents
la méthode hide,
qui masque les éléments de manière fluide