jQuery mouseenter 和 mouseleave fade 防止延迟重复

Question

所以，我有一个 div，它会在鼠标进入时淡入淡出，在鼠标离开时淡入淡出，效果很好。

$('.myDiv').mouseenter(function(){
$(this).fadeTo('slow', 1);
});

$('.myDiv').mouseleave(function(){
$(this).fadeTo('slow', 0.4);
});

参见 jsfiddle。

但是，如果您多次快速移动鼠标，div 将 "flash" 动画保持运行。有没有办法阻止这种情况发生？

我尝试过回调，但没有达到预期的效果。

有什么建议吗？

Answer 1

尝试：

$('.myDiv').mouseenter(function(){
    $(this).stop();
    $(this).fadeTo('slow', 1);

});
$('.myDiv').mouseleave(function(){
    $(this).stop();
    $(this).fadeTo('slow', 0.4);
});

https://jsfiddle.net/1Lrcubwp/

Answer 2

更好的方法是使用CSS。 Javascript 不应用于此类动画，因为它会使您的网站变慢。请参阅下面的示例。

.fade {
        background-color: red;
    width: 200px;
    height: 200px;  
   opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
    cursor: pointer;
   }

   .fade:hover {
      opacity: 1;
      }

<div class='fade'></div>

jQuery mouseenter 和 mouseleave fade 防止延迟重复

jQuery mouseenter and mouseleave fadeTo prevent delayed repeat

javascript

jquery

mouseenter

mouseleave

fadeto