jquery - 悬停时的淡入淡出/淡入淡出背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2408761/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery - fadeOut/fadeIn background image on hover
提问by CLiown
I have a <div>which contains a background image, the <div>sits within a toolbar in HTML.
我有一个<div>包含背景图像的图像，它<div>位于 HTML 的工具栏中。
HTML:
HTML：
<div id="toolbar">
<div class="image"> </div>
</div>
CSS:
CSS：
#toolbar .image {
background url('images/logo.png') no-repeat top left;
}
#toolbar .imagehover {
background url('images/logoHover.png') no-repeat top left;
}
When the mouse hovers over #toolbarI want the background image of .imageto change but using .fadeOut()and .fadeIn()
当鼠标悬停在#toolbar我希望背景图像.image改变但使用.fadeOut()和.fadeIn()
So far I have:
到目前为止，我有：
$("#toolbar").hover(function () {
$(".image").fadeOut("slow");
$(".image").addClass("imagehover");
$(".imagehover").fadeIn("slow");
},
function () {
$(this).removeClass("imagehover");
});
Currently the logo fades out and the hover logo fades in twice.
目前标志淡出，悬停标志淡入两次。
Any help appreciated.
任何帮助表示赞赏。
采纳答案by Amgad Fahmi
//Use the fad in out callback
$("#toolbar").hover(function () {
$(".image").fadeOut("slow", function () {
$(this).addClass("imagehover").fadeIn("slow", function () {
$(this).removeClass("imagehover");
});
});
});
//or you can use animate
$("#toolbar").animate({
"class": "imagehover"
}, "slow", 'easein', function () {
//do what every you want
});
回答by Keith
There's no way to do smooth transitions between images in jQuery - it doesn't know how to translate between one image and the next. You can do colour transitions with a plugin.
没有办法在 jQuery 中的图像之间进行平滑过渡 - 它不知道如何在一个图像和下一个图像之间进行转换。您可以使用插件进行颜色转换。
You can do some of this with CSS transitions. You can only use transitions on values set in CSS and they're not in all the browsers yet:
您可以使用 CSS 过渡来完成其中的一些工作。您只能在 CSS 中设置的值上使用转换，并且它们尚未在所有浏览器中使用：
/* faded out logo class */
.faded-logo {
opacity: 0.30; /* FX, Safari, GC, Opera, decent browsers */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /* IE8 */
filter: alpha(opacity=30); /* IE */
background: url('images/logo.png') no-repeat top left;
/* in Safari, FX and Chrome add a fade transition */
-webkit-transition: opacity .25s linear .1s;
transition: opacity .25s linear .1s;
}
/* no opacity on hover */
.faded-logo:hover {
opacity: 1; /* FX, Safari, GC, Opera, decent browsers */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE8 */
filter: alpha(opacity=100); /* IE */
}
This will have a pretty fade effect on mouseover, the change in opacity will still happen in IE, but without the fade transition.
这将对鼠标悬停产生漂亮的淡入淡出效果，不透明度的变化仍会在 IE 中发生，但没有淡入淡出过渡。
Another option is to fade the images in and out on top of one another - you could do this with jQuery hover events or CSS, but in either case you'll need the images to be absolutely positioned on top of one another.
另一种选择是使图像在彼此之上淡入淡出 - 您可以使用 jQuery 悬停事件或 CSS 来实现这一点，但在任何一种情况下，您都需要将图像绝对放置在彼此之上。
回答by Anthony
Since you can't fade a background image, you could try switchClass()which you can set to a timer. I'm not sure you'd get a pure fade out and fade in, but you might get a cool morph effect.
由于您无法淡化背景图像，您可以尝试将switchClass()其设置为计时器。我不确定你会得到一个纯粹的淡出和淡入，但你可能会得到一个很酷的变形效果。
So it would be something like:
所以它会是这样的：
$("#toolbar img:hover").switchClass("image","imagehover", "slow");
