1

画面全体に合わせて背景画像を拡大したウェブサイトがあります。クリックすると背景画像が変わるサムネイルがあります。背景画像が変化しているときにクロスフェードトランジションを発生させようとしていますが、機能しないようです。

現在、サムネイルをクリックすると、画面全体（コンテンツを含む）がフェードアウトし、正しい背景画像でフェードインします。コンテンツをフェードアウトさせたくない...背景画像のみをフェードアウトさせようとしているだけです。私の問題は、HTMLページ全体をフェードアウトするように指示していることだと思いますが、サイト全体の背景画像だけをターゲットにする方法がわかりません。

CSS

html {
    background: url(../img/01.jpg) no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

JavaScript

$("#wrapper #thumbs figure img").click(function() {
    var id = $(this).attr('id');        
    $('html').fadeOut("slow", function() { });
    $('html').fadeIn("slow", function() {
        $('html').css('background', 'url(' + images[id] + ') no-repeat center fixed');
    }); 
});
4

2 に答える 2

1

Backstretchを使用してみましたか？

于 2012-05-07T04:22:44.693 に答える
1

このためにHTML要素をターゲットにするのではなくdiv、本文全体のサイズである複数のを使用する必要があります。z-index次に、適切なスタッキングを取得し、必要に応じて2つの要素を同時にクロスフェードするように指定できます。

このjsFiddleでこれを開始する例を示しました。これは、独自のバックグラウンドフェードをすばやくロールする方法の例ですが、ユースケースに適合できる場合は、Avinashの回答の方が適している可能性があります。

于 2012-05-07T04:14:02.690 に答える