Jquery fadeOut在hover时

我需要jquery的一些帮助才能获得fadeOut效果，这是我的代码：

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

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

欢迎所有建议！

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（但hover保持有效），然后当hover离开时，淡入淡化为1的不透明度。

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

如果您只想在支持CSS3过渡的浏览器中使用效果（还没有IE的版本），那么您也可以在没有jQuery / javascript的情况下执行此操作，并且只使用CSS3过渡。 但是对于像这样简单的事情，当你已经拥有jQuery时，使用jQuery淡入淡出并获得跨浏览器支持非常容易。

Answer 2

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

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 in缓慢淡出

Answer 4

fadeOut示例fadeOut用于您的html代码。 原因很简单 – mouseout或hover第二个function将在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：

 
  
​ 

和css：

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