加载页面内容时,Jquery淡入淡出

时间:2010-02-01 16:38:34

标签: jquery css

我想在jquery中创建一个效果,等待我的页面的每个元素在显示任何内容之前完成加载。同样的效果是here

正如您所看到的,当您加载或刷新页面时,会出现背景颜色,当所有内容都加载完毕后,jquery会将其淡入。我的网站是:http://www.vitaminjdesign.com

关于如何做到这一点的任何想法?

2 个答案:

答案 0 :(得分:4)

执行此操作的最佳方法(顺便提一下,与Zaum网站使用的方法相同)是创建一个覆盖整个可见画布的div,并在页面完全加载后淡出OUT。这是代码:

#mask {
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    background-color:red; 
    z-index:99;
}

HTML:

<HTML>
<HEAD>
<TITLE>Mask Example</TITLE>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<SCRIPT type="text/javascript">
$(window).load(function () {
    $('#mask').fadeOut('slow');
});
</SCRIPT>
</HEAD>
<BODY>
<P>Some text goes here</P>
<IMG src="http://spaceflight.nasa.gov/gallery/images/shuttle/sts-119/hires/s119e008352.jpg" />
<P>And moar text!!</P>
<DIV id="mask"></DIV>
</BODY>
</HTML>

与身体不透明度混淆通常被认为是不好的做法,在某些浏览器上可能不完全支持。

答案 1 :(得分:0)

将其放入CSS文件中(或直接放在body标记中):

body {
    display: none;
}

JS必须(在headbody中):

<script type="text/javascript">
    $(window).load(function() {
        $('body').fadeIn()
    })
</script>

当加载文档的整个内容时,将执行该函数。