当页面内容被加载时Jquery淡入淡出

我想在jquery中创建一个效果，等到我的页面的每个元素在显示任何内容之前完成加载。 here的效果也是一样的。当页面内容被加载时Jquery淡入淡出

正如你可以看到，当您加载或刷新页面，背景颜色出现，当一切都完成加载，jQuery的消失在我的网站是：http://www.vitaminjdesign.com

如何做到这一点任何想法？

2010-02-01 JCHASE11

这样做的最好方法（顺便说一句，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>

与身体不透明度梅辛通常被认为是不好的做法，可能不完全支持某些浏览器。

来源

2010-02-01 17:29:25

喜欢它，这就是我正在寻找的 – JCHASE11 2010-02-01 17:36:26

我也加了一个ajax loader。非常感谢 – JCHASE11 2010-02-01 17:59:44

很高兴帮助：D – 2010-02-01 18:08:24

要把它放到你的CSS文件（或直接在body标签）：

body { 
    display: none; 
}

而且JS必须（在head或body）：

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

功能被执行当文档的全部内容被加载时。

来源

2010-02-01 16:48:44

他希望它在所有页面加载后出现，包括图片。 – 2010-02-01 16:54:25

Felix你需要'$（window）.load（function（）{'在这种情况下，图像也要加载。“ – 2010-02-01 16:59:30

是的，它会在加载前简单地淡入，导致动荡不定。 – JCHASE11 2010-02-01 16:59:38

当页面内容被加载时Jquery淡入淡出

回答

相关问题