Javascript 使用 jQuery 淡入淡出背景图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5533171/
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
Fade background image in and out with jQuery?
提问by Ryan Lester
So far, I've tried a bunch of things to the effect of the following, without success:
到目前为止，我已经尝试了很多事情来达到以下效果，但没有成功：
<script type="text/javascript">
var x = 0;
while (true) {
/* change background-image of #slide using some variation
of animate or fadeIn/fadeOut with or without setTimeout */
x++;
}
</script>
Any ideas?
有任何想法吗？
回答by Hussein
You can fade background colors but not background images. The way to work around this is to have your images as <img>tags and hide them by default display:none;. Give your images position:absoluteand z-index:-1so they act like backgrounds and are behind everything else.
您可以淡化背景颜色，但不能淡化背景图像。解决这个问题的方法是将您的图像作为<img>标签并默认隐藏它们display:none;。给你的图片position:absolute，z-index:-1让它们像背景一样，在其他一切之后。
Here's a quick example of images fading one after the other.
这是一个图像一个接一个褪色的快速示例。
HTML
HTML
<img src=".." />
<img src=".." />
CSS
CSS
img{
position:absolute;
z-index:-1;
display:none;
}
jQuery
jQuery
function test() {
$("img").each(function(index) {
$(this).hide();
$(this).delay(3000* index).fadeIn(3000).fadeOut();
});
}
test();
Check working example at http://jsfiddle.net/RyGKV/
在http://jsfiddle.net/RyGKV/检查工作示例
回答by Hans. M.
You can fade backgound-images! in and out!
您可以淡化背景图像！进进出出！
jQuery:
jQuery：
$('#yourdiv').animate({opacity: 0}, 0).css("background-image", "url(image.jpeg)").animate({opacity: 1}, 2500);
Edit:
编辑：
This will fade the whole div not onley the background-image.
这将淡化整个 div 而不是背景图像。
回答by Khez
Although you can't directly fade-in a background-image. You can fade-in a solitary element containing only a background-image...
虽然你不能直接淡入一个background-image. 您可以淡入一个仅包含background-image...
回答by Cantrelby
I got here because I was looking for a solution to fading background images based on a <select>option change. I combined what I had already written with Hussein's jsfiddle above and came up with this jsfiddle.net/v4BMC/.
我来到这里是因为我正在寻找一种基于<select>选项更改来淡化背景图像的解决方案。我将我已经写的内容与上面 Hussein 的 jsfiddle 结合起来，并提出了这个jsfiddle.net/v4BMC/。
This initially stacks two identical images on top of each other. When the <select>is changed, the top image's style attribute is removed, the bottom image's src is changed and the top image is faded out to reveal the bottom one. (The top image finishes with a style="display:none"which needs to be removed at the beginning of the operation, otherwise it doesn't work.)
这最初将两个相同的图像堆叠在一起。当<select>改变时，顶部图像的样式属性被移除，底部图像的 src 被更改，顶部图像淡出以显示底部图像。（上图以astyle="display:none"结尾，操作开始时需要删除，否则无效。）
Hope this is useful to someone else and not too irrelevant to be included here!
希望这对其他人有用，而不是太不相关而不能包含在此处！
