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

最新推荐文章于 2023-01-13 14:52:59 发布

AlloyTeam-Zy

最新推荐文章于 2023-01-13 14:52:59 发布

阅读量6.5k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/ZYGG5521/article/details/47611101

我写的一些web前端小特效专栏收录该内容

3 篇文章

订阅专栏

本文探讨了在使用jQuery时遇到的mouseover和mouseout事件在快速移动元素时延迟触发的问题。通过分析代码示例，提出利用stop()方法停止当前动画，从而解决事件响应延迟的方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先来看一段代码：

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

    $("div.div1").mouseover(function()

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

    $("div.div1").mouseout(function()

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

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

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

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

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