Javascript jQuery mouseenter和mouseleave fadeTo防止延迟重复

所以，我有一个div，在鼠标进入时向上淡入，在鼠标移动时向下淡入，效果很好

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

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

看

但是，如果快速来回移动鼠标几次，div将在动画继续运行时“闪烁”。有没有办法阻止这种情况发生

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

有什么建议吗

试试看：

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

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

试试：

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

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

---

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

.fade{
背景色：红色；
宽度：200px；
高度：200px；
不透明度：0.4；
过滤器：alpha（不透明度=40）；/*适用于IE8及更早版本*/
过渡：不透明度。25秒缓进缓出；
-moz过渡：不透明度。25秒缓进缓出；
-webkit过渡：不透明度。25秒易入易出；
光标：指针；
}
.消失：悬停{
不透明度：1；
}

---

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

.fade{
背景色：红色；
宽度：200px；
高度：200px；
不透明度：0.4；
过滤器：alpha（不透明度=40）；/*适用于IE8及更早版本*/
过渡：不透明度。25秒缓进缓出；
-moz过渡：不透明度。25秒缓进缓出；
-webkit过渡：不透明度。25秒易入易出；
光标：指针；
}
.消失：悬停{
不透明度：1；
}

---

虽然使用CSS通常是我的首选，这是一个很好的回答，但从技术上讲，这个问题的范围是基于javascript或jquery的，因此如果将来有人看到这个问题，则会将另一个答案标记为正确。然而，我可能会使用这个版本！另外，对于其他正在寻找此方法的人，如果您想在将鼠标悬停在原始div上时使用CSS更改不同元素的不透明度，请将此方法与组合使用，尽管使用CSS通常是我的首选选项，这是一个很好的响应，从技术上讲，这个问题的范围是基于javascript或jquery的，因此如果将来有人考虑这个问题，那么另一个答案将被标记为正确。然而，我可能会使用这个版本！另外，对于其他正在寻找此方法的人，如果您希望在将鼠标悬停在原始div上时使用CSS更改不同元素的不透明度，请将此方法与