Question

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

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

欢迎所有建议！

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() 1}}功能。因此，只需将不透明度淡化为0（但悬停保持有效），然后当悬停离开时，淡入淡化为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 out slowly than Fade in

Answer 4

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;}

Jquery fadeOut悬停

4 个答案: