5

j-query を使用して読み込み時にページ本文をフェードインしようとしていますが、何らかの理由で本文の背景画像が j-query の影響を受けていません。私が以下に持っているコードを見てください：

head セクションの J-Query コード:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('body').fadeIn(2000);
});
</script>

CSS コード:

body
{
overflow:hidden;
background:url('body.png') no-repeat;
background-size:100%;
display:none;
}

本文に含まれるすべてのもの (div、段落、見出しなど) は、j-query コードに従って読み込み時にフェードインしますが、本文の背景画像 (body.png) はページと共に即座に読み込まれます。上記のコードで私が間違っていることを誰でも提案できますか?

4

3 に答える 3

10

bodyおかしな振る舞いをします。ページ全体のコンテンツを別のページでラップしてdivフェードインする必要があります。

<body>
    <div id="wrapper">
        # Page Contents #
    </div>
</body>

CSS:

#wrapper{
    background-image:url('some-image.jpg');
    display:none;
}

jQuery:

$(document).ready(function(){
    $('#wrapper').fadeIn();
});

このJSFiddleを参照してください。

于 2013-11-13T19:23:50.950 に答える