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

最新推荐文章于 2024-07-26 10:19:04 发布

code旅行者

最新推荐文章于 2024-07-26 10:19:04 发布

阅读量5k

点赞数

分类专栏： javascript 文章标签： JavaScript 动画

本文链接：https://blog.csdn.net/dotNET25/article/details/8903943

版权

javascript 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

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

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：本来没有想到要这么做的，变态的客户成就了这一切......