利用jQuery實現頁面漸顯效果
編輯：關於JavaScript
最近在看jQuery，就在實際項目裡加了個小的應用，當時的想法就是點擊一個鏈接跳轉到另個頁面時，頁面是逐漸顯示出來，也就是由透明到實體的一個過程！
說下思路吧，在body裡用一個div把所有的標簽包含住，在此div後再定義一個div，後面這個div是用來實現漸顯效果的。
如下所示：
<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！
自己琢磨出來實現漸顯頁面的思路，也不知道大家的思路是什麼樣的如果有更好的方法歡迎大家一起研究啊！
Ryan Gene兄提出最好加上demo演示
呵呵！最後貼出在線演示效果！
說下思路吧，在body裡用一個div把所有的標簽包含住，在此div後再定義一個div，後面這個div是用來實現漸顯效果的。
如下所示：
<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！
自己琢磨出來實現漸顯頁面的思路，也不知道大家的思路是什麼樣的如果有更好的方法歡迎大家一起研究啊！
Ryan Gene兄提出最好加上demo演示
呵呵！最後貼出在線演示效果！
小編推薦
熱門推薦