淺析jQuery頁面漸顯效果的實現
作者：心曠神怡
這里我們將分析jQuery頁面漸顯效果的實現，通過本文希望能對大家了解jQuery有所幫助。
我們將討論的是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實現頁面漸顯效果》
【編輯推薦】
責任編輯：彭凡
來源：
博客園
