Jquery fadeOut悬停

Question

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

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淡入淡出并获得跨浏览器支持非常容易.