Maison  >  Article  >  interface Web  >  Parlons de la façon d'utiliser stop() dans jquery

Parlons de la façon d'utiliser stop() dans jquery

PHPz
PHPzoriginal
2023-04-24 14:52:16789parcourir

jQuery, en tant que puissante bibliothèque JavaScript, est souvent utilisée pour gérer divers effets interactifs, effets d'animation, etc. dans les pages Web. Lors de ces opérations, il est parfois nécessaire de mettre en pause ou d'arrêter l'effet d'animation en cours. Dans ce cas, vous pouvez utiliser la méthode stop dans jQuery.

Utilisation de la méthode stop

Dans jQuery, la méthode stop est utilisée pour arrêter l'effet d'animation en cours sur l'élément DOM actuel. Sa syntaxe est la suivante :

$(selector).stop(stopAll, goToEnd);

Parmi eux, selector représente le sélecteur d'élément DOM qui doit être arrêté ; stopAll est un paramètre facultatif, indiquant s'il faut arrêter tous les effets d'animation dans la file d'attente. La valeur par défaut est false, qui s'arrête uniquement. l'animation active actuelle ; goToEnd est également un paramètre facultatif, indiquant s'il faut passer directement à l'état final de l'animation actuelle. La valeur par défaut est false, ce qui consiste à arrêter progressivement l'effet d'animation.

Par exemple, si vous devez arrêter un effet d'animation en cours sur l'élément DOM $("#myElem"), le code est le suivant :

$("#myElem").stop();

Dans ce code, la méthode stop arrêtera directement l'effet d'animation en cours, une fois l'effet d'animation actuel terminé, aucun autre effet d'animation ne sera effectué.

Si vous devez arrêter les effets d'animation dans toutes les files d'attente sur l'élément, le code est le suivant :

$("#myElem").stop(true);

Dans ce code, le paramètre stopAll de la méthode stop est défini sur true, ce qui signifie arrêter les effets d'animation dans toutes les files d'attente sur l'élément actuel.

Si vous devez arrêter tous les effets d'animation dans la file d'attente et passer directement à l'état final, le code est le suivant :

$("#myElem").stop(true, true);

Dans ce code, le paramètre goToEnd de la méthode stop est défini sur true, ce qui signifie arrêter tous les effets d'animation dans la file d'attente et passez directement à l'état final.

Utilisation avancée de la méthode stop

La méthode stop peut également être appliquée pour gérer plusieurs effets d'animation sur un élément. Dans ce cas, l'implémentation interne de la méthode stop est légèrement différente de l'utilisation ci-dessus. Si plusieurs effets d'animation sont effectués sur un élément DOM en même temps, vous pouvez envisager d'utiliser le code suivant pour arrêter l'un des effets d'animation :

$("#myElem").stop("propertyName");

Dans ce code, propertyName représente le nom de l'effet d'animation qui doit être arrêté , qui peut inclure les éléments suivants :

  • "queueName" : Arrête tous les effets d'animation dans la file d'attente.
  • "fx": Arrêtez tous les effets d'animation de l'objet actuel (jQuery.fx).
  • Tout nom utilisé pour définir l'effet d'animation, tel que "opacité", "largeur", "hauteur", etc.

Correspondant, si vous devez arrêter tous les effets d'animation sur certains éléments en même temps, le code est le suivant :

$(".myElems").stop(false, true);

Dans ce code, le comportement par défaut lorsque la méthode stop n'est pas appelée est d'arrêter uniquement le courant effets d'animation actifs et définissez le paramètre stopAll Set sur true pour arrêter tous les effets d'animation sur ces éléments.

Conclusion

Grâce à l'introduction de cet article, nous avons appris l'utilisation de base de la méthode stop de jQuery, ainsi que la mise en œuvre de certaines utilisations avancées. Lors du traitement des effets d'animation, il est très pratique et efficace d'utiliser la méthode stop pour certains effets qui doivent être arrêtés ou mis en pause. Cependant, nous devons faire attention à l'utilisation des paramètres corrects lors de l'utilisation de la méthode d'arrêt, sinon cela affectera le fonctionnement de l'ensemble de l'effet d'animation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn