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

最新推荐文章于 2024-09-21 17:47:05 发布

AlloyTeam-Zy

最新推荐文章于 2024-09-21 17:47:05 发布

阅读量6.4k

点赞数

本文链接：https://blog.csdn.net/ZYGG5521/article/details/47611101

版权

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

摘要由CSDN通过智能技术生成

首先来看一段代码：

<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在那不停的一上一下，此时，我的鼠标已经没动了，这个效果很差，事件延迟触发，然后我就在想，怎么解决，刚开始，想到