Méthode stop

La méthode stop nous permet d'arrêter immédiatement une animation en cours. L'animation continuera à partir de la fonction suivante sans terminer la précédente.

Syntaxe

Ainsi nous arrêtons une animation en cours. Il est possible de passer deux paramètres optionnels qui acceptent des valeurs booléennes. Si le premier paramètre est défini sur true, alors les fonctions restantes dans la file d'animation seront supprimées et ne seront jamais exécutées. Si le second paramètre est défini sur true, alors lors de l'arrêt de l'animation, les propriétés CSS de l élément prendront immédiatement leurs valeurs finales (c'est-à-dire, si l'objectif était de masquer l'élément en douceur, il sera masqué instantanément) :

.stop([clearQueue], [jumpToEnd]);

Il est également possible de passer un paramètre optionnel, dans lequel est spécifié le nom de la file d'attente :

.stop([nom de la file], [clearQueue],[jumpToEnd]);

L'animation peut être désactivée globalement en utilisant le paramètre jQuery.fx.off = true, qui fixe la valeur de la durée à 0.

Exemple

Faisons en sorte qu'à chaque clic sur le bouton #toggle notre rectangle se déplie puis se replie à l'aide de la méthode slideToggle. Cliquez sur le bouton sans attendre la fin de l'animation - l'étape suivante sera lancée sans attendre la fin de la précédente, grâce à la méthode stop :

<button id="toggle">toggle</button>
<div id="test"></div>

#test {
	background-color: green;
	border: 1px solid black;
	width: 200px;
	height: 100px;
	margin: 10px;
}

$('#toggle').on('click', function() {
	$('#test').stop().slideToggle(1500);
});

Voir aussi

la méthode clearQueue,
qui permet de supprimer tous les éléments non exécutés de la file d'attente des fonctions
la propriété jQuery.fx.off,
qui permet de désactiver globalement l'animation