首先来看一段代码：
<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当快速移动时事件延迟触发问题的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
417
