どうやって新しい背景にフェードインできますか？

新しいページに移動するときにページの背景を変更しようとしていますが、新しい画像をページの内容より遅くフェードアウトします。しかし、新しいイメージをフェードインしようとすると、背景を含むdivにもコンテンツが含まれているため、文字通りページ全体がフェードインします。背景画像の変更を含むdivは "nextImage"です。ここでどうやって新しい背景にフェードインできますか？

<body> 
<div id="nextImage"> 
    Bunch of Content 
</div> 
</div> 
</body>

は、私は新しいページにある作業を取得しようとしているのjavascriptです：

<script type="text/javascript"> 
    $('#nextImage').css('background-image', 'url(Tranquil.jpg)').hide(); 
    $('#nextImage').fadeIn(5000); 
</script>

ここCSSです：事前にあなたの助けを

body 
{ 
    background-image:url("abstract1.jpg"); 
    background-repeat: no-repeat; 
    background-size:100%; 
    background-attachment:fixed; 
    font-family:font-family: Helvetica,Arial, sans-serif; 
    text-align:center; 
    width: 100%; 
    height: 100%; 
} 
#nextImage 
{ 
    background-image=""; 
    background-repeat: no-repeat; 
    background-size:100%; 
    background-attachment:fixed; 
    font-family:font-family: Helvetica,Arial, sans-serif; 
    text-align:center; 
    width: 100%; 
    height: 100%; 
    z-index:1; 
}

感謝：D

出典

2012-02-29 Gavin Sellers

あなたは基本的にあなた自身の質問に答えました。the div containing the background also contains the content

必要に応じて、コンテンツ

<body> 
    <div id="nextImage"> 
    </div> 
    <div id="content"> 
     Bunch of Content 
    </div> 
</body>

ここでチェックアウト私の例をhttp://jsfiddle.net/Hn9w4/

出典

2012-02-29 23:44:23 Henesnarfel

背景がページの上に表示されるため、これは機能しません。もちろん、bodyの高さにnextImageの高さを調整するにはjavscriptを使用する必要はありません。 –

あなたがする必要があるのは、あなたのバックグラウンドdivに – Henesnarfel

の 'position：absolute;'を置くだけです。これはそれを1か所に保ちましたが、今はそれがフェードインしてコンテンツをカバーします。 –

に影響を与えることなく、背景をフェードできるように、2つのオーバーレイさのdiv（HTTPを使用することができます背景のdivおよびコンテンツdivのセパレート： //stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div）、バックグラウンドでフェードアウトします。

出典

2012-03-01 00:03:41

2つのオーバーレイされたdiv（http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div）を使用し、バックグラウンドでフェードインすることができます。 –

どうやって新しい背景にフェードインできますか？

答えて

関連する問題