Maison > interface Web > js tutoriel > les événements jquery survolent, mouseenter et mouseleave ne déclenchent l'animation qu'une seule fois

les événements jquery survolent, mouseenter et mouseleave ne déclenchent l'animation qu'une seule fois

黄舟
Libérer: 2017-06-28 10:05:18
original
2695 Les gens l'ont consulté

jquery l'événement hover mouseenter mouseleave ne se déclenche qu'une seule fois animation

jquery.mouseenter(function(){
    $(div).animate({'margin-top':'100px'},1000)
})
jquery.mouseleave(function(){
    $(div).animate({'margin-top':'200px'},1000)
})
Copier après la connexion

Déplacez la souris vers un certain div, déclenchez l'événement mouseenter et l'animation, et déplacez out pour déclencher des événements et des animations mouseleave, mais lorsque le div est déplacé d'avant en arrière, l'événement est déclenché plusieurs fois et l'animation est répétée plusieurs fois. Comment les événements mouseenter et mouseleave ne peuvent-ils pas être déclenchés pendant le processus d'exécution de l'animation ? c'est-à-dire que pendant le processus d'animation, la souris passe. Après ce div, l'animation ne réapparaîtra pas. Elle ne sera déclenchée qu'une fois l'animation terminée et franchie à nouveau

Vous pouvez utiliser la méthode d'arrêt :

$(div).stop(false, true).animate({'margin-top':'100px'},1000);
Copier après la connexion

Si le premier de stop() Si le paramètre est vrai, cela signifie effacer immédiatement la file d'attente de l'animation actuelle, la valeur par défaut est fx si le deuxième paramètre est vrai ; , cela signifie mettre immédiatement l'animation en cours d'exécution à son état final.

Juge avant d'exécuter l'animation :

if (!$(obj).is(':animated')) {    // to do something
}
Copier après la connexion

Si l'élément sélectionné n'est pas dans l'état d'animation, l'animation sera exécutée. Sinon, ignorez

^_^ (l'expression de la rencontre avec une question à laquelle on a clairement répondu auparavant)

C'est ce qu'on appelle le "problème d'atomicité de l'animation" par @Humphry. C'est-à-dire, si l'action d'animation est un processus atomique non réentrant, alors comment implémenter cette fonctionnalité dans le code.

Une réponse très claire peut être trouvée ici. La réponse est la méthode de marquage évidente : aligner l'élément à animer, définir la marque lorsque l'animation démarre et la supprimer lorsqu'elle se termine (en utilisant la fonction de rappel ). Lorsqu'il y a une marque, l'événement qui démarre l'animation ne doit pas être déclenché.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal