3

ボディの背景画像をfadeOutに変更し、2番目の画像を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')

 });

フェードイン/フェードアウトなしで画像を変更できますが、その場合は構文を間違えていると思います。

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

ここで実際の例を参照してください

アップデート

私のプロジェクトの1つでは、すべてを黒にフェードしてから、元のコードが行ったのと同じ別の画像で元に戻したいと思っていました。コンテンツを表示したままにしたい場合は、あまり変更する必要はありません。画像の背景に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 に答える