当前位置:Gxlcms > JavaScript > jQuery事件mouseover和mouseout当快速移动时事件延迟触发问题

jQuery事件mouseover和mouseout当快速移动时事件延迟触发问题

时间:2021-07-01 10:21:17 帮助过:8人阅读

首先来看一段代码:

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

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

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

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

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


上述的代码很简单,我之所以没有用 hover() 来写,是因为我想让代码思路更清晰,更容易理解!它所实现的效果就是将鼠标放在class为“p1”的p上,class为“p2”的p的bottom值为“10px”,将鼠标移开,其值将变为“-50”px,就是一个class为p2上下移动的效果,可是当我快速将鼠标放在class为p1的p上,然后快速移开,以此反复几次,然后你会发现那个class为p2的p在那不停的一上一下,此时,我的鼠标已经没动了,这个效果很差,事件延迟触发,然后我就在想,怎么解决,刚开始,想到使用omouseenter代替了你原来的mouseover,使得第一次触发事件后,在对象区域反复移动将不再继续触发,然后觉得也可以使用:not(:animated)来判断当前对象是否正在执行动,还想到preventDefault();结果都有一一去验证,去实现,有的出结果了,但效果还是不理想,有的还没出结果。。。。。

最后,我想到了jQuery的 stop(), 它的作用是停止当前正在运行的动画,只要将目前正在运行的动画停下来,然后在实现往上往下移动就好,然后写下了如下代码:

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


结果解决了jQuery的mouseover和mouseout事件当快速移动 事件延迟触发问题,而且动画效果很友好,很赞!

当快速移动 事件延迟触发问题

当快速移动 事件延迟触发问题

当速移动 事件延迟

以上就是jQuery事件mouseover和mouseout当快速移动时事件延迟触发问题的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行