快速移动鼠标导致js 的mouseover，mouseout，mouseenter，mouseleave等事件（触发动画）反复叠加的处理

关注

原创最新推荐文章于 2026-06-14 12:54:42 发布 5.2k 阅读 AI 写同款· GEO 优化 ›

JavaScript实战入门：从语法基础到工程思维的完整学习路径 JavaScript作为现代Web开发的核心语言，其学习路径往往需要从基础语法认知逐步过渡到工程实践思维。理解变量、数据类型、函数等基础概念是构建程序的基石，而数组与对象的操作则是处理结构化数据的关键。掌握异步编程原理，如事件循环和Promise机制，是开发高效、响应式应用的核心。在实际应用中，通过DOM操作与事件处理实现交互逻辑，并借助模块化、ESLint、Webpack等工程化工具提升代码的可维护性。本文围绕JavaScript语法、异步编程、DOM操作及工程化实践，系统梳理了从入门到实战的核心知识体系阅读详情

如题，看了好多网友的文章，办法是无效的，我验证出了一种方案，共享一下：

hover方法是jquery封装的js的mouseover，mouseout事件

 $("#footNav img").hover(function () {
                if (!$(this).is(":animated")) {
                    itsWidth = $(this).css("width");
                    itsHeight = $(this).css("height");
                    var itsWidthValue = itsWidth.substring(0, itsWidth.lastIndexOf('p'));
                    var itsHeightValue = itsHeight.substring(0, itsHeight.lastIndexOf('p'));
                    $(this).animate({ "width": itsWidthValue * 1.1 + "px", "height": itsHeightValue * 1.1 + "px" }, 200);
                }
            },function () {
                $(this).animate({ "width": itsWidth, "height": itsHeight }, 200);
            })

if (!$(this).is(":animated")) //这是关键，判断当前元素是不是正在执行动画，如果没有，可以执行下面的代码，如果它本身正在执行，则不叠加执行

场景：当用户快速移动鼠标的时候，快得变态的时候，导致上一个事件还没有执行完下一个又要执行了，叠加起来产生古怪的效果。

ps：本来没有想到要这么做的，变态的客户成就了这一切......