jQuery event mouseover and mouseout event delay triggering problem when moving quickly

First let’s look at a piece of 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>

The above code is very simple. The reason why I didn’t use hover() to write it is because I want to The code ideas are clearer and easier to understand! The effect it achieves is to place the mouse on p with class "p1", and the bottom value of p with class "p2" is "10px". If you move the mouse away, its value will become "-50" px. It is the effect of moving up and down the class p2, but when I quickly put the mouse on the p with the class p1, and then quickly move away, repeating this several times, then you will find that the p with the class p2 is not stopping there. Up and down, at this time, my mouse has not moved, the effect is very poor, event is triggered delayed, and then I was thinking about how to solve it. At first, I thought of using omouseenter instead Replace your original mouseover, so that after the first trigger event, repeated movement in the object area will no longer trigger it, and then I think you can alsouse:not(:animated) to judge Whether the current object is executing an action, I also thought of preventDefault();. The results have to be verified and implemented one by one. Some results have been produced, but the effect is still not ideal, and some have not yet produced results. . . . .

Finally, I thought of jQuery's stop(), its function is to stop the currently running animation, as long as the currently running Stop the running animation, then move it up and down, and then write the following code:

##

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

The result solves the problem of delayed triggering of jQuery's mouseover and mouseout events when the fast movement event occurs, and the animation effect is very friendly, which is great!

When the fast movement event is delayed and triggers the problem

When the fast movement event is delayed and triggers the problem

Delay of current movement event

The above is the detailed content of jQuery event mouseover and mouseout event delay triggering problem when moving quickly. For more information, please follow other related articles on the PHP Chinese website!