悬停时Jquery淡出

Question

我需要一些关于 jquery 的帮助来获得淡出效果，这是我的代码：

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

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

欢迎所有建议！

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 淡入淡出并获得跨浏览器支持就很容易了。

Answer 2

fadeOut 的示例不适用于您的 html 代码。原因很简单——mouseout 或hover 的第二个函数将在fadeOut 动画结束时触发，因为图像将获得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;}​

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 Transition - Fade out slowly than Fade in

Answer 4

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