Méthode slideToggle
La méthode slideToggle affiche de manière fluide
les éléments masqués et masque les éléments affichés.
Syntaxe
Affichage/masquage pendant une durée donnée,
400ms par défaut :
.slideToggle(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 :
.slideToggle('slow' ou 'fast');
Si aucun paramètre n'est spécifié - il n'y aura pas d'animation, les éléments seront affichés/masqués instantanément :
.slideToggle();
Il est également possible de passer une fonction d'adoucissement 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 :
.slideToggle(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 :
.slideToggle(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 :
.slideToggle( {duration: 600, easing: easeInSine} );
Exemple
Après un clic sur le bouton, masquons fluidement
le div parent qui contient les paragraphes,
à l'aide de la méthode slideToggle (ce div
sera trouvé à l'aide de la méthode
parent),
après un nouveau clic sur le bouton, le div sera
à nouveau affiché fluidement et ainsi de suite. En passant le mot-clé
slow, nous définirons la vitesse à 600ms :
<button>toggle text</button>
<div>
<p id='test'>text text text text text text text</p>
<p>text text text text text text text</p>
<p>text text text text text text text</p>
</div>
$('button').click(function() {
$('#test').parent().slideToggle('slow');
});
