Comment arrêter l'animation ou l'effet dans jQuery

Comment arrêter l'animation ou l'effet dans jQuery

Les animations ou les effets rendent le contenu présentable pour les utilisateurs finaux. jQuery propose diverses méthodes telles que animate (), fadein (), fadeout () etc., Pour ajouter l'animation ou l'effet. Et si vous voulez arrêter l'animation ou l'effet? Vous pouvez également le faire, voyons comment?

La méthode stop () aide à arrêter l'animation ou l'effet dans jQuery. La méthode d'arrêt fournit des fonctionnalités de collecteur, comme arrêter l'animation / l'effet instantanément ou séquentiellement. Cet article montre les moyens d'arrêter l'animation ou un effet dans jQuery.

Comment arrêter l'animation ou l'effet dans jQuery

La méthode stop () en jQuery aide à arrêter l'animation ou l'effet qui s'exécute. La syntaxe de la méthode stop () est illustrée ci-dessous.

$ (sélecteur).STOP (Clearqueue, Jumptoend);

Le sélecteur pourrait être n'importe quel élément HTML ou classe / ID de l'élément. De plus, la méthode stop () offre deux paramètres (facultatifs mais pas nécessaires)

  • clearqueue: Il accepte les valeurs booléennes (vraies ou fausses) et décide de l'arrêt des animations à venir. Le FAUX(Valeur par défaut) La valeur indique que seule l'animation actuelle sera arrêtée et que d'autres animations en file d'attente seront démarrées par la suite. Tandis que le vrai La valeur met fin à l'animation instantanément.
  • jumpoend: Sa valeur par défaut est FAUX, si la vrai la valeur est attribuée puis il termine les animations et la file d'attente est également effacée.

La syntaxe ci-dessus fonctionne pour diverses méthodes jQuery telles que FADING (), Sliding (), Show (), Hide ().

Comment arrêter les animations dans jQuery

Cette section pratique quelques exemples qui guident pour arrêter les animations dans divers scénarios en utilisant la méthode stop ().

Exemple 1: Utilisation de la méthode stop () sans paramètres

Le code ci-dessus anime le Largeur du div avec une vitesse de millisecondes = "5000". De plus, la méthode stop () arrête l'animation en cours.

Sortir

Avant l'animation

Après avoir appliqué la méthode stop () au hasard (s'arrêter n'importe où)

Exemple 2: Utilisation de la méthode stop () avec paramètres

Le code suivant pratiquait la méthode Stop () en utilisant les deux paramètres. Et la valeur du paramètre est définie sur vrai.

Le code ci-dessus anime la propriété de largeur, puis la méthode Stop (vrai, vrai) est appliquée.

Sortir

Avant de faire une action

Après avoir démarré l'animation, lorsque le bouton d'arrêt d'animation est cliqué, l'animation se termine immédiatement.

Comment arrêter l'effet de décoloration () dans jQuery

La méthode stop () en jQuery peut également être utilisée pour arrêter un effet. Le code fourni ci-dessous exerce l'effet de décoloration, puis la méthode stop () pour arrêter cet effet.

Le code ci-dessus fades-out le div à vitesse 2500 millisecondes et la méthode d'arrêt est utilisée pour arrêter la méthode de décoloration.

Sortir

Avant le processus de départ / arrêt de la décoloration

Après le démarrage du processus de décoloration, lorsque le bouton d'arrêt est cliqué, le processus de décoloration sera arrêté comme indiqué dans l'image ci-dessous (dans notre cas).

Conclusion

La méthode stop () de jQuery est utilisée pour arrêter l'animation ou un effet. La méthode stop () accepte deux paramètres, et il peut également être appliqué sans paramètres. Les deux paramètres sont de nature booléenne et donc les valeurs vraies / fausses sont acceptées uniquement. Vous auriez appris l'application de la méthode stop () pour arrêter l'animation dans jQuery. De plus, la méthode stop () est également exercée sur une méthode fadeout () dans jQuery.