用淡出和淡入效果替换网页背景图片的jQuery方法

Question

我只想通过淡出更改页面的背景图像，然后通过淡入替换第二个图像。
但我收到了以下错误提示：

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

 });

我可以在不淡入/淡出的情况下更改图像，但我猜在那种情况下，我可能会犯语法错误。

- mctuna

---

你可以使用CSS3过渡来交叉淡化背景图片。这是唯一的方法，可以在不引入额外元素到DOM中的情况下工作。 - Shmiddty

Answer 1

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

其次，你的代码将淡入/淡出整个body。背景图片本身无法淡化。

我建议你使用一个放在内容后面并淡化它。

- Salman A

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

在这里查看一个工作示例

---

更新

在我的一个项目中，我想要将所有内容淡化为黑色，然后再用不同的图像淡入，这就是我的原始代码所做的。如果您想保持内容可见，您不需要改变太多。只需在背景中放置一个带有您的图像的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');
          });

在此处查看一个实际示例

- Aust

---

如果您想让内容出现在“背景”前面，那么这就有点复杂了。 - Shmiddty

你的示例没有显示背景图像和任何内容，http://jsfiddle.net/2kFdj/1/ 更容易查看（并了解为什么这不能满足OP的需求）。 - Ruan Mendes