如何停止fadeIn（）闪烁？

目前我有一个简单的div，我希望在另一个div的鼠标hover时淡入，但它会闪烁3次。

我已经阅读了其他一些问题，我认为这与我的代码结构有关。 但我不确定如何纠正我的，因为它已经如此基本。

这是我的代码：

 $(document).ready(function(){ $('.content .guide ul.guide li .event').mouseover(function(){ $(this).find('.info').fadeIn(); }); $('.content .guide ul.guide li .event').mouseout(function(){ $(this).find('.info').fadeOut(); }); });  

CSS

 .content .guide ul.guide li .event .info {display:none;} 

HTML

 
 
 
Monday
 
 7:30am Ep 5: Lorem 
 
 
 
Ep 8: Lorem ipsum
 
 
 
 
 8:30pm Ep 5: Lorem 
 
 
 
Ep 8: Lorem ipsum
 
 
 
 
 
 
Tuesday
 
 
 
 
 
  

Answer 1

你可以使用stop().fadeTo()来防止这种情况发生。 请在此处查看以下代码和演示

Answer 2

我只在Google Chrome中遇到了这个麻烦。 将“.fadeIn”更改为“.fadeTo（myDuration，1）”。 对我来说，没有“.stop（）”就可以正常工作。

Answer 3

我有这个，这解决了我的问题（我使用的是fadeIn和fadeOut）

 $( "#board" ).stop().animate({ "opacity": 1 },300); 

Answer 4

老问题，但我想在解决这个问题之后添加我的发现，以防它们对任何偶然发现这个问题的人有所帮助。

当使用stop（）。fadeIn（）时，它只会暂停动作，直到触发下一个动作。

而不是stop（），然后我尝试了finish（）。fadeIn（）和finish（）。fadeOut（）。 这工作得更好。 当前正在进行的动画立即完成，并且当前动画已开始。

对于上面的例子，它将是：