jquery图像淡出 [英] Jquery Image Fade Out

问题描述

我正在使用这个jquery来尝试淡出我的图像并显示下面的内容。除非您将鼠标悬停在它上面，否则它会很好地工作。然后它吓坏了，开始一遍又一遍地进出。有什么我可以做的吗？

  $（'＃contentPosters li'）。hover（function（）{
 $（this）.find（'img'）。fadeOut（）; 
}，
 function（）{
 $（this）.find（'img'）。fadeIn ）; 
}）; 
  

解决方案

  $（ '#contentPosters li'）。hover（function（）{
 $（this）.find（'img'）。stop（）。fadeTo（'fast'，0）; 
}，
 $ function（）{
 $（this）.find（'img'）。stop（）。fadeTo（'fast'，1）; 
}）; 
  

使用 stop（） AND fadeTo

stop（）用于停止当前动画。 ）的用法是因为当您在 fadeIn / fadeOut 期间停止动画时，不透明度将不会重置为100％，并且您的图片在整个时间内将不可见。

I am using this jquery to try and fade out my image and show whats underneath. It works perfect except when you hover over it multiply times. Then it freaks out and starts going in and out over and over again. Is there something I can do about that?

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

解决方案

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

Use stop() AND fadeTo

stop() is for stopping current animation.

fadeTo() usage is because when you stop the animation during fadeIn / fadeOut, the opacity will not reset to 100%, and your image will become invisible over the time.

这篇关于jquery图像淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！