加载时页面中的淡入效果

Question

加载时页面中的淡入效果

5

我想使用jQuery在页面加载时渐变显示页面主体，但不知何故，页面的背景图片未受到jQuery的影响。请参见下面的代码：

head部分中的jQuery代码：

<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 /段落/标题等）都按照jQuery代码在加载时淡入，然而body的背景图像（body.png）会与页面一起立即加载。请问有人能建议我上面的代码有什么错误吗？

- Sam Friday Welch

1

你可以将HTML淡入淡出而不是整个页面 http://jsfiddle.net/GtBPe/ - Abraham Uribe

3个回答

1

像 @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;

- pashri

0

我不确定这是否也会影响背景图片，但是您可以在不使用jQuery的情况下实现淡入效果。至少在支持CSS3的浏览器中可以：

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

- Developicus

1

谢谢您，尽管页面背景图像仍然会立即加载，但很高兴知道使用关键帧和Jquery也可以实现淡入淡出效果 :-) - Sam Friday Welch

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Robbie Wxyz · Accepted Answer

表现奇怪。您需要在整个页面的内容中包装另一个

并淡入该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。