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当快速移动时事件延迟触发问题的详细内容,更多请关注其它相关文章!