Le survol de l'événement jQuery et le retard de l'événement mouseout déclenchent un problème lors d'un déplacement rapide

Regardons d'abord un morceau de code :

<span style="font-family:SimHei;font-size:14px;">$(document).ready(function(){

    $("p.p1").mouseover(function()

       {$("p.p2").animate({bottom:&#39;10px&#39;},1000);})

    $("p.p1").mouseout(function()

       {$("p.p2").animate({bottom:&#39;-50px&#39;},1000);}
    )
});</span>

Le code ci-dessus est très simple. La raison pour laquelle je n'ai pas utilisé hover(. ) je l'écris parce que je veux rendre les idées de code plus claires et plus faciles à comprendre ! L'effet obtenu est de placer la souris sur p avec la classe "p1", et la valeur inférieure de p avec la classe "p2" est "10px". Si vous éloignez la souris, sa valeur deviendra "-50" px. C'est l'effet de monter et descendre la classe p2, mais quand je place rapidement la souris sur le p avec la classe p1, puis que je m'éloigne rapidement, en répétant cela plusieurs fois, alors vous constaterez que le p avec la classe p2 ne s'arrête pas là. De haut en bas, à ce moment-là, ma souris a arrêté de bouger. L'événement est retardé et déclenché. Ensuite, j'ai réfléchi à la façon de le résoudre. , j'ai pensé à utiliser omouseenter à la place. Remplacez votre survol d'origine afin qu'après le premier événement déclencheur, les mouvements répétés dans la zone objet ne le déclenchent plus. Ensuite, je pense que vous pouvez également . utilisez :not(:animated) pour juger si l'objet actuel exécute une action, j'ai aussi pensé à preventDefault();. Les résultats ont été vérifiés et implémentés un par un. Certains résultats ont été produits, mais l'effet n'est pas encore idéal, et certains n'ont pas encore donné de résultats. . . . .

Enfin, j'ai pensé au stop() de jQuery, sa fonction est de arrêter l'animation en cours d'exécution, tant que l'animation en cours d'exécution Arrêtez l'animation en cours, puis déplacez-la de haut en bas, puis écrivez le code suivant :

<span style="font-family:SimHei;font-size:14px;">$(&#39;p.p1&#39;).hover(
function() {
$("p.p2").stop().animate({bottom:&#39;10px&#39;},1000);})
},
function() {
$("p.p2").stop().animate({bottom:&#39;-50px&#39;},1000);}
}
);</span>

En conséquence, le problème du déclenchement retardé des événements de survol et de sortie de souris de jQuery lorsque des événements de mouvement rapide sont déclenchés, et l'effet d'animation est très convivial et génial !

Lorsque l'événement de mouvement rapide est retardé, le problème est déclenché

Lorsque l'événement de mouvement rapide est retardé, le problème est déclenché

Délai d'événement de déplacement

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!