Jquery用fadeout和fadein效果替换身体背景图像

Question

我只想用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')

 });

我可以在没有fadein / fadeout的情况下更改图像，但我想在这种情况下我会犯一个sytax错误。

Answer 1

您的代码失败，因为$('body').css("background-image")返回一个字符串 - CSS背景图像属性的值; 不是jQuery对象。

其次，你的代码会淡入/淡出整个身体。 背景图像本身不能褪色。

我建议你使用一个位于内容后面的img并将其淡化。

Answer 2

而不是淡出身体，然后将其淡入。你可以通过覆盖整个屏幕的遮蔽div淡化，改变身体的背景图像，然后淡出遮蔽div来获得完全相同的效果。 像这样的东西：

HTML - 在HTML中的任何位置添加此行

<div id="mask" style="position: absolute; top: 0; left: 0; background: black; display: none;"​​​​​​​​​​​​​​​​​​​​​​></div>​

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

在我的一个项目中，我希望将所有内容淡化为黑色，然后使用不同的图像返回，这是我的原始代码所做的。 如果您希望保持内容可见，则无需进行太多更改。 只需在背景中添加一个div与您的图像。 然后将遮罩技术仅应用于背景图像。

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的

 $('#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'); }); 

在这里查看一个工作示例