Question

我正在尝试使用j-query在加载时淡入我的页面主体，但是由于某种原因，主体的背景图像不受j查询的影响。请参阅下面的代码：

头部的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 / paragraph / headings等）根据j-query代码在加载时淡入，但是body的背景图像（body.png）会立即加载页面。请问任何人可以建议我上面的代码出错吗？

Answer 1

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。

Answer 2

我不确定它是否也会影响背景图像，但你也可以在没有jQuery的情况下做淡入效果。至少在支持CSS3的浏览器中：

@keyframes fadein{
   from{opacity:0;}
   to{opacity:1;}
}
.someElement{
   animation: fadein 2s;
}

Answer 3

就像@ITFarmer等，您可以在CSS3中完成，但您也可以使用CSS3为背景图像设置动画。

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeinbg {
    from {
        background-image: none;
    }
    to {
        background:url('body.png') no-repeat;
    }
}

.container {
    animation: fadein 2s;
}

.body {
    animation: fadeinbg 2s;

在加载页面淡入淡出

3 个答案: