我正在尝试使用 j-query 在加载时淡入我的页面正文，但是由于某种原因，正文的背景图像不受 j-query 的影响。请看我下面的代码：
头部的 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）会立即随页面加载。请任何人都可以建议我在上面的代码中做错了什么？
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。
就像@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;
我不确定它是否也会影响背景图像，但你也可以在没有 jQuery 的情况下实现淡入效果。至少在支持 CSS3 的浏览器中：
@keyframes fadein{
from{opacity:0;}
to{opacity:1;}
}
.someElement{
animation: fadein 2s;
}