jQuery鼠标悬停淡出效果

Question

我需要一些关于jquery的帮助，以实现淡出效果。以下是我的代码：

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

当你将鼠标悬停在图片上时，图片需要淡出并显示下面的红色区域；当你将鼠标移开时，图片应该再次淡入。我认为代码可能需要一个停止函数 - 只是写起来有点困难。

欢迎所有建议！

- Filth

Answer 1

在你的特定jsFiddle中，使用以下内容：

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

您可以在这里看到它的工作效果：http://jsfiddle.net/jfriend00/BJwn7/。

关键在于您不能使用 .fadeOut() 和 .fadeIn()，因为当它们完成时，它们会设置 display: none，这会导致元素被隐藏，从而破坏了 .hover() 函数。因此，只需将不透明度淡化为 0（但悬停仍然有效），然后当悬停离开时，将其淡化回不透明度为 1。

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

如果您只想在支持 CSS3 转换的浏览器中使用该效果（尚未支持 IE 的任何版本），则也可以不使用 jQuery/javascript，而只使用 CSS3 转换即可。但对于像这样简单的事情，当您已经拥有 jQuery 时，使用 jQuery 淡入淡出并获得跨浏览器支持非常容易。

- jfriend00

---

@JordyVialoux - 我稍微调整了一下，添加了.stop(true)，这样如果你快速进出，它的表现会好一些。 - undefined

Answer 2

$('#show').hover(
  function () {
    $(this).fadeOut("slow");
  }, 
  function () {
    $(this).fadeIn("slow");
  }
);

- msonsona

---

接近了，但当你悬停时它需要淡出 - 如果有帮助的话，请尝试使用上面的jsfiddle链接。 - undefined

你实际在他们的jsFiddle中试过这个吗？我觉得它不起作用，因为.fadeOut()在完成后隐藏了对象，这会影响.hover()。 - undefined

Answer 3

你从CSS过渡开始，所以这里有一个使用它的示例：

• http://jsfiddle.net/PPpnT/33/

我使用Firefox，因此示例仅适用于Firefox，但其他浏览器应该是对称的。

在这里阅读更多相关内容：

• http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/

致谢：

• CSS Webkit过渡 - 淡出比淡入慢

- icyrock.com

---

当然可以 - 不幸的是，IE目前似乎不支持这个功能：https://dev59.com/nm435IYBdhLWcg3w-lT2 - undefined

Answer 4

使用 fadeOut 的示例将无法与您的HTML代码一起工作。原因很简单 - 在 fadeOut 动画结束时，mouseout 或 hover 的第二个函数将被触发，因为图像将获得 display:none 属性。请查看我的代码 http://jsfiddle.net/TW232/

$('div').hover(function(){
    $(this).width($('img', this).width()).height($('img', this).height());
    $('img', this).stop(true,true).fadeOut('fast');
    }, function(){
    $('img', this).stop(true,true).fadeIn('fast');
});​

html:

<div>
 <img id="show" src="http://img14.imageshack.us/img14/9698/29588166.jpg" alt=""/>
</div>​

和 CSS：

div {background:red; width:0px;}​

- Cheery