淡入背景 jquery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17825194/
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 in background jquery
提问by BrunoWB
I'm trying to fade some images on the background of my site but isn't working T_T . Thanks in advance !
我试图淡化我网站背景上的一些图像，但不起作用 T_T 。提前致谢 ！
HTML :
HTML :
<body>
<div id="menu1"></div>
<div id="menu2"></div>
<div id="menu3"></div>
</body>
CSS :
CSS :
body {
background-color: #1f304e;
background-image: url('images/bg.jpg');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: center 0px;
}
JQuery :
查询：
$('#menu1').click(function(){
$(body).animate({background : url('images/bg1.jpg') }, 600);
});
$('#menu2').click(function(){
$(body).animate({background : url('images/bg2.jpg') }, 600);
});
$('#menu3').click(function(){
$(body).animate({background : url('images/bg3.jpg') }, 600);
});
回答by compid
You cannot directly animate the background image property of an element. You can fade in an entire element though, so try to create a divthat contains the image, and fade that in.
您不能直接为元素的背景图像属性设置动画。不过，您可以淡入整个元素，因此请尝试创建一个div包含图像的对象，然后将其淡入。
Try to mimic the background with a div instead:
尝试用 div 来模仿背景：
CSS:
CSS：
#bg {
background-color: #1f304e;
background-image: url('images/bg.jpg');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: center 0px;
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
}
HTML:
HTML：
<body>
<div id="bg"></div>
<div id="menu1"></div>
<div id="menu2"></div>
<div id="menu3"></div>
</body>
Javascript:
Javascript：
$('#menu1').click(function(){
$("#bg").fadeOut(function() {
$("#bg").css({background : url('images/bg1.jpg') });
$("#bg").fadeIn(300);
}, 300);
});
$('#menu2').click(function(){
$("#bg").fadeOut(function() {
$("#bg").css({background : url('images/bg2.jpg') });
$("#bg").fadeIn(300);
}, 300);
});
$('#menu3').click(function(){
$("#bg").fadeOut(function() {
$("#bg").css({background : url('images/bg3.jpg') });
$("#bg").fadeIn(300);
}, 300);
});
This will fade out the background, swap the image, then fade it back in. If you want a proper crossfade, you will need at least two divs in the background.
这将淡出背景，交换图像，然后将其淡入。如果您想要适当的交叉淡入淡出，则背景中至少需要两个 div。
回答by Bhaumik Mehta
HTML
HTML
<div class="main"></div>
css
css
.main {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
background-image: url(imagesrc);
background-size: cover;
background-repeat: no-repeat;
}
JS
JS
setTimeout(function() {
$(".main").css("background-image", "url(imageSrc)");
}, 2000);
If you want to change background with multiple images then,
如果你想用多张图片更改背景，那么
var backgroundPath = "images/";
var backgrounds = ["image1.png", "image2.png", "image3.png", "image4.png"];
var i = 0;
setTimeout(function() {
var timer = setInterval(function() {
$(".main").css("background-image", "url(" + backgroundPath + backgrounds[i] + ")");
i ++;
if (i >= backgrounds.length) {
i = 0;
}
}, 2000);
}, 3000);
Change the css and js according to your requirements. Cheers!!
根据您的要求更改 css 和 js。干杯！！
