javascript Jquery用淡出和淡入效果替换身体背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13710128/
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 replacing body background-image with fadeout and fadein effect
提问by mctuna
I just want to change background-image of body with a fadeOut and replace the second image with fadeIn.
But I get the following error:
我只想用fadeOut 更改body 的背景图像并用fadeIn 替换第二个图像。
但我收到以下错误：
Uncaught TypeError: Object url(file:///C:/Users/.../p1bg_cutted.png) has no method 'fadeOut'
$('body').css("background-image").fadeOut('slow',function(){
$("body").css("background-image",
"url(Images/son_componentler/p2bg_cutted.png)").fadeIn('slow')
});
I can change the image without fadein/fadeout but I guess in that case I am making a sytax mistake.
我可以在不淡入/淡出的情况下更改图像，但我想在这种情况下我犯了语法错误。
回答by Salman A
You code fails because $('body').css("background-image")returns a string -- the value of the CSS background image property; not a jQuery object.
您的代码失败，因为$('body').css("background-image")返回一个字符串——CSS 背景图像属性的值；不是 jQuery 对象。
Secondly, your code will fade in/fade out the entire body. Background image itself can not be faded.
其次，您的代码将淡入/淡出整个正文。背景图像本身不能褪色。
I suggest that you use an imgpositioned behind content and fade it.
我建议你使用img定位在内容后面并淡化它。
回答by Aust
Instead of fading out the body and then fading it back in. You can get the exact same effect by fading in a masking div that covers the whole screen, change the background-image of the body, and then fading out the masking div. Something like this:
而不是淡出正文然后将其淡入。您可以通过淡入覆盖整个屏幕的遮罩 div，更改正文的背景图像，然后淡出遮罩 div 来获得完全相同的效果。像这样的东西：
HTML- Add this line anywhere in your HTML
HTML- 在 HTML 中的任意位置添加此行
<div id="mask" style="position: absolute; top: 0; left: 0; background: black; display: none;"??????????????????????></div>?
JavaScript
JavaScript
$('#mask').css({height: $(window).height(), width: $(window).width()})
.fadeIn('slow', function(){
$('body').css('background-image', 'url(Images/son_componentler/p2bg_cutted.png)');
$('#mask').fadeOut('slow');
});?????
UPDATE更新
In one of my projects I wanted to fade everything to black and then back in with a different image which is what my original code did. If you want to keep the content visible, you don't have to change much. Just have a div in the background with your image. Then apply the masking technique over only your background image.
在我的一个项目中，我想将所有东西都淡化为黑色，然后用不同的图像重新显示，这就是我的原始代码所做的。如果您想保持内容可见，则不必进行太多更改。只需在背景中添加一个带有图像的 div。然后仅在您的背景图像上应用遮罩技术。
HTML
HTML
<div id="img" style="position: absolute; z-index: -99; top: 0; left: 0;"></div>
<div id="mask" style="position: absolute; z-index: -98; top: 0; left: 0; background: white; display: none;"></div>
JavaScript
JavaScript
$('#mask').css({height: $(window).height(), width: $(window).width()})
.fadeIn('slow', function(){
$('#img').css('background-image', 'url(http://www.jsfiddle.net/img/logo.png)');
$('#mask').fadeOut('slow');
});
