悬停时的Jquery淡出

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

当您将鼠标悬停在图像上方时，图像需要淡出并显示下方的红色，当您将鼠标移离图像时，图像应淡出。我认为代码可能需要一个stop函数——只是写起来有点困难

---

欢迎大家提出建议

您从CSS转换开始，下面是一个示例：

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

我使用Firefox，所以这个示例只针对Firefox进行了更新，但其他示例应该是对称的

请在此处阅读更多信息：

学分：

---

在特定的JSFIDLE中，使用以下命令：

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

您可以看到它在这里工作：

它们在这里的关键是您不能使用

.fadeOut（）

和

.fadeIn（）

，因为当它们完成时，它们会设置

显示：none

，这会导致元素被隐藏，并使

.hover（）

功能混乱。因此，只需将不透明度淡入0（但悬停保持有效），然后当悬停离开时，将不透明度淡入1

我还必须从JSFIDLE中删除红色块的不透明CSS，因为您希望它在淡出图像时可见，这样您就可以在图像后面看到它

---

如果您只想在浏览器中获得支持CSS3转换的效果（目前还没有IE版本），那么您也可以在不使用jQuery/javascript的情况下使用CSS3转换。但是对于像这样简单的东西，当您已经拥有jQuery时，只需使用jQuery淡出并获得跨浏览器支持就非常容易了。

淡出的示例将不适用于html代码。原因很简单-

mouseout

或

hover

的第二个功能将在

fadeOut

动画结束时触发，因为图像将获得

display:none

属性。看看我的代码

html:

---

关闭，但当您悬停时它需要淡出-如果有帮助，请尝试使用上面的JSFIDLE链接。您真的在他们的JSFIDLE中尝试过这个吗？我认为它不起作用，因为

.fadeOut（）

隐藏了对象，这会弄乱

.hover（）

。当然-不幸的是IE似乎还不支持这一点：@JordyVialoux-我通过添加

.stop（true）

对它进行了一些调整，因此如果你快速进入/离开，它的性能会更好一些。

$('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');
});​

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

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