3

我只想用淡入淡出改变身体的背景图像，并用淡入淡出替换第二个图像。
但我收到以下错误：

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

 });

我可以在没有淡入/淡出的情况下更改图像，但我想在这种情况下我犯了一个语法错误。

4

2 回答 2

4

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

其次，您的代码将淡入/淡出整个正文。背景图像本身不能褪色。

我建议您使用img定位在内容后面并将其淡化。

于 2012-12-04T19:12:51.163 回答
0

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

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

<div id="mask" style="position: absolute; top: 0; left: 0; background: black; display: none;"​​​​​​​​​​​​​​​​​​​​​​&gt;</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');
          });

在此处查看一个工作示例

于 2012-12-04T19:29:57.577 回答