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

黄舟

发布： 2017-06-28 11:16:37

原创

2624 人浏览过

首先来看一段代码：

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

登录后复制

上述的代码很简单，我之所以没有用 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;">$(&#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>

登录后复制

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