Jquery图像淡出

我正在使用这个jquery尝试淡出我的图像并显示下面的内容。 除非您将鼠标hover在它上面，否则它的工作方式非常完美。 然后它吓坏了，开始一次又一次地进出。 我可以做些什么吗？

$('#contentPosters li').hover(function(){ $(this).find('img').fadeOut(); }, function(){ $(this).find('img').fadeIn(); }); 

Answer 1

 $('#contentPosters li').hover(function(){ $(this).find('img').stop().fadeTo('fast',0); }, function(){ $(this).find('img').stop().fadeTo('fast',1); }); 

使用stop（）和fadeTo

stop（）用于停止当前动画。

fadeTo（）的使用是因为当您在fadeIn / fadeOut期间停止动画时，不透明度将不会重置为100％，并且您的图像将随时间变得不可见。

Answer 2

是。 在动画function之前添加“stop（）”。

 $('#contentPosters li').hover(function(){ $(this).find('img').stop().fadeOut(); }, function(){ $(this).find('img').stop().fadeIn(); }); 

上面的确定在技术上可行，但我认为更好的工作方式是。

 var delay = 200; $('#contentPosters li').hover(function(){ $(this).find('img').dequeue().fadeTo(delay,0); }, function(){ $(this).find('img').dequeue().fadeTo(delay,1); }); 

Answer 3

尝试使用.fadeToggle（’fast’），它涵盖了所有捕获。

看起来像stop（）不能使用默认的.fadeToggle，因为它会在不透明度中途停止动画。

 $('#contentPosters li').hover(function(e) { $(this).find('img').stop().fadeTo(200,'mouseleave'==e.type) }); 

http://jsfiddle.net/rkw79/w2vus/

编辑：新小提琴现在起作用

最新更新：这是最干净的解决方案

http://jsfiddle.net/rkw79/xBtpC/

 $('#contentPosters li').hover(function(e) { $(this).find('img').stop(true,true).fadeToggle('fast'); });