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

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)
})

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);

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
}

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!