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

See a working example here

<小时/> 的更新

在我的一个项目中，我想将所有内容淡化为黑色，然后使用不同的图像返回，这就是我的原始代码所做的。如果您希望保持内容可见，则无需进行太多更改。只需在背景中添加一个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'); });

See a working example here

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

2 个答案: