jQuery mouseenter和mouseleave fade用于防止延迟重复

Question

所以，我有一个div，鼠标在鼠标左右上下移动，效果很好。

$('.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不应该用于这种动画，因为它会使你的网站变慢。 请参阅下面的示例。

＆＃13;

＆＃13;

xml

＆＃13;

<GridView

＆＃13;

＆＃13;

＆＃13;