在背景jQuery中淡出 [英] fade in background jquery
本文介绍了在背景jQuery中淡出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试淡化网站背景上的某些图像，但无法正常工作T_T. 预先感谢！
I'm trying to fade some images on the background of my site but isn't working T_T . Thanks in advance !
HTML:
<body>
<div id="menu1"></div>
<div id="menu2"></div>
<div id="menu3"></div>
</body>
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);
});
推荐答案
您不能直接为元素的背景图像属性设置动画.不过，您可以淡入整个元素，因此请尝试创建一个包含图像的div并将其淡入.
You cannot directly animate the background image property of an element. You can fade in an entire element though, so try to create a div that contains the image, and fade that in.
尝试用div模仿背景:
Try to mimic the background with a div instead:
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:
<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);
});
这将淡出背景，交换图像，然后将其淡入.如果要进行适当的淡入淡出，则背景中至少需要两个div.
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.
这篇关于在背景jQuery中淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
