欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2024-04-02 18:31:28
...
首先来看一段代码:
<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当快速移动时事件延迟触发问题的详细内容,更多请关注其它相关文章!