アニメーションHTML背景画像フェード

Question

私は、背景画像が画面全体に収まるようにウェブサイトを持っています。クリックするとサムネイルが表示され、背景画像が変更されます。背景画像が変化しているときにクロスフェードトランジションを起こそうとしていますが、動作させることができません。

サムネイルをクリックすると、画面全体（コンテンツを含む）がフェードアウトしてから、正しい背景画像でフェードインされます。私はコンテンツがフェードアウトするのを望んでいません...私はただ背景画像だけをフェードアウトさせようとしています。私は自分の問題は、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'); 
    }); 
}); 

Answer 1

Backstretchを試しましたか？

Answer 2

あなたは体全体のサイズである複数div Sを使用代わりに、このためにHTML要素を対象とはなりません。次に、z-indexを指定して、必要に応じて2つの要素を一度に適切なスタッキングとクロスフェードすることができます。

私はこれをjsFiddleに開始させる例を挙げました。これは、あなた自身のバックグラウンドフェージングを素早く行うための例ですが、あなたのユースケースに合っていれば、Avinashの答えはより良くなるでしょう。