·浅析jQuery页面渐显效果的实现_H5之家 - 中国HTML5教程资源分享第一站

我们将讨论的是jQuery页面渐显效果的实现，将从代码的角度来进行讲解，希望能让大家了解jQuery页面渐显效果实现的具体步骤。

最近在看jQuery，就在实际项目里加了个小的应用，当时的想法就是点击一个链接跳转到另个页面时，页面是逐渐显示出来，也就是由透明到实体的一个过程！

说下思路吧，在body里用一个div把所有的标签包含住，在此div后再定义一个div，后面这个div是用来实现jQuery页面渐显效果的。

如下所示：

<html> 
<body> 
<div id="bodyDiv"> 
<!--省略内部标签--> 
</div> 
<div id="hideDiv"></div> 
</body> 
</html>

我的想法是最后一个div定位在整个页面最上层，div的背景设为白色，也就完全覆盖了下面的div，当点击到该页面时，页面加载完时，上面这个div开始逐渐消失，下面的div便实现了逐渐显现的效果。

贴出jQuery代码

Code

<script> 
   $j(function() {  
        $j("#hideDiv").css({ top: offset.top, left: offset.left, width: $j("#bodyDiv2").width(), height: $j("form").height(), backgroundColor: "White", opacity: 1, position: "absolute" })//给hideDiv添加样式  
        if (jQuery.isReady)//这里是判断页面是否加载  
        {  
            $j("#hideDiv").fadeOut(1000);//让div逐渐消失的方法  
        }  
});  
</script>

代码很简单吧！呵呵！wirte less do more！

本文来自心旷神怡的博客园文章《利用jQuery实现页面渐显效果》

【编辑推荐】

【责任编辑：彭凡 TEL：（010）68476606】