Sam*_*lch 3 javascript css jquery fade
我试图在加载时使用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)会立即加载页面.任何人都可以建议我上面的代码做错了吗？
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.