mouseenter/mouseleave多次触发fadeIn/fadeOut问题

古城微笑少年丶 2023-07-26 05:38 14阅读 0赞

在一次使用使用**mouseenter/mouseleave**实现显示/隐藏操作的时候发现会多次触发**fadeIn/fadeOut,**

效果如下图：

![20200415215026139.gif][]

每次会累计触发fadeIn/fadeOut

代码如下

**css：**

div {
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        border: 1px solid #999;
    }
    
    div:nth-of-type(2n) {
        background: lightpink;
    }
    
    .mask {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%);
    }
    
    div:hover {
        background: lightblue;
    }

**html：**

**JavaScript：**

$('.mouse-list').mouseenter(() => {
    	$('.mask').fadeIn(200)
    }).mouseleave(() => {
    	$('.mask').fadeOut(200)
    })

**出现这种问题原因：**

猜想：可能是fadeOut会有一定的延迟，每次都要执行完才会执行下一组动画，跟不上鼠标移入移出的速度，所以累计多组动画，之后慢慢依次显示。

**解决方式：**

** 1、不使用fadeIn/fadeOut**

1.1、使用Jq中的show()/hide()  //注意：不要写时间，比如(hide(100)/ show(0)...)。

1.2、使用Js中操作样式style.display = 'none' /style.display=''block 或者 添加class等等让当前隐藏元素影藏。

如果**非要使用fadeIn和fadeOut**看下面解决方式

**2、利用JQuery中的stop()**

stop()方法说明

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDI4Njc4_size_16_color_FFFFFF_t_70][]

2.1、给fadeIn/fadeOut加上**.stop**

$('.mouse-list').mouseenter(() => {
    	$('.mask').stop(true).fadeIn(200)
        //或者
        //$('.mask').stop(false, true).fadeIn(200)
    }).mouseleave(() => {
    	$('.mask').stop(true).fadeOut(200)
        //或者
        //$('.mask').stop(false, true).fadeOut(200)
    })

**3、使用.filter(':not:animated')**

$('.mouse-list').mouseenter(() => {
    	$('.mask').filter(':not(:animated)').fadeIn(200)
    }).mouseleave(() => {
    	$('.mask').filter(':not(:animated)').fadeOut(200)
    })

**4、设置css(pointer-events:none;)**

![20200415222253313.png][]

上面就是解决问题的思路和方法，希望能帮助看到的人。

想看更多点击[我的博客][Link 1]

[20200415215026139.gif]: /images/20230528/acff6786d5a94b79914f859f768585d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDI4Njc4_size_16_color_FFFFFF_t_70]: /images/20230528/38d58500949f4f00927f4da1acb6ed79.png
[20200415222253313.png]: /images/20230528/a4320976b790454f9362dffcd086f96a.png
[Link 1]: https://blog.csdn.net/qq_40428678