jQuery中hover连续触发动画的bug

最新推荐文章于 2021-04-21 14:41:01 发布

壹米阳光丶

最新推荐文章于 2021-04-21 14:41:01 发布

阅读量718

点赞数

分类专栏： Web前端文章标签： jquery 动画

本文链接：https://blog.youkuaiyun.com/qq_35896874/article/details/60768972

版权

Web前端专栏收录该内容

4 篇文章

订阅专栏

博客探讨了jQuery中hover事件导致的动画连续触发动画的bug，特别是在创建下拉菜单特效时出现的问题。解决方案是通过增加filter方法，过滤掉正在执行的动画，以避免hover事件反复触发。

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

jQuery中hover连续触发动画的bug

在用jQuery实现下拉菜单特效时，经常会鼠标连续触碰对象会导致hover事件反复发生：

 jQuery("#nav li").hover(function(){
        $(this).find("ul:first").slideDown("slow");
    },function(){
        $(this).find("ul:first").slideUp("fast");
 });

解决方法：增加filter过滤到正在执行的动画模块即可，修正后的代码如下

jQuery("#nav li").hover(function(){
        $(this).find("ul:first").filter(':not(:animated)').slideDown("slow");
    },function(){
        $(this).find("ul:first").slideUp("fast");
});