Jquery fadeOut on hover [英] Jquery fadeOut on hover

问题描述

我需要一点帮助jquery以获得fadeOut效果发生，这里是我的代码：

http://jsfiddle.net/PPpnT/25/

当您将鼠标悬停在图片上时图像需要淡出并显示下面的红色，当你的鼠标离开图像应该退色。我认为代码可能需要一个停止函数 - 只是很难编写它。

欢迎所有建议！

解决方案

在您的特定jsFiddle中，使用：

  ）.hover（function（）{
 $（this）.stop（true）.fadeTo（slow，0）; 
}，function（）{
 $（this）。 stop（true）.fadeTo（slow，1）; 
}）; 
  

您可以看到它的工作原理： http://jsfiddle.net/jfriend00/BJwn7/ 。

$ b他们的关键是你不能使用 .fadeOut（）和 .fadeIn（）因为当他们完成时，他们设置 display：none 这导致元素被隐藏，混乱了 .hover（） / code>函数。所以，相反，只是褪色不透明度为0（但悬停效果），然后当悬停叶子，退色到不透明度1。

我也不得不从您的jsFiddle中删除红色块的不透明CSS，因为您希望在淡出图像时可见，因此您可以将其留在图像后面。

如果你只想要在支持CSS3过渡（没有版本的IE）的浏览器的效果，那么你也可以这样做没有jQuery / javascript和只使用CSS3过渡。但对于这样简单的东西，当你已经有jQuery，很容易只使用jQuery淡入淡出和获得跨浏览器支持。

I need a bit of help with jquery to get a fadeOut effect happening, here is my code:

http://jsfiddle.net/PPpnT/25/

When you hover over the image the image needs to fade out and show the red underneath, when you mouse off the image should fade back. I think the code may need a stop function - just having a hard time writing it.

All suggestions welcome!

解决方案

In your specific jsFiddle, use this:

$('#show').hover(function() {
    $(this).stop(true).fadeTo("slow", 0);
}, function() {
    $(this).stop(true).fadeTo("slow", 1);
});​

You can see it work here: http://jsfiddle.net/jfriend00/BJwn7/.

They key here is you can't use .fadeOut() and .fadeIn() because when they are done, they set display: none which causes the element to be hidden and that messes up the .hover() function. So, instead just fade the opacity to 0 (but the hover stays in effect) and then when the hover leaves, fade back to opacity of 1.

I also had to remove the opacity CSS for the red block from your jsFiddle because you want it to be visible when you fade out the image so you can just leave it visible behind the image.

If you only wanted the effect in browser that support CSS3 transitions (no version of IE yet), then you could also do this without jQuery/javascript and just use CSS3 transitions. But for something as simple as this, when you already have jQuery, it's pretty easy to just use jQuery fades and get cross browser support.

这篇关于Jquery fadeOut on hover的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！