jQuery mouseenter和mouseleave淡入防止延迟重复

Question

因此，我有一个div，它在鼠标输入时逐渐消失，在mouseleave上逐渐下降，这很好用。

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

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

参见jsfiddle 。

但是，如果您快速反复地前后移动鼠标几次，随着动画继续运行，div将“闪烁”。 有办法阻止这种情况发生吗？

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

有什么建议么？

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>