利用jQuery實現頁面漸顯效果

最近在看jQuery，就在實際專案里加了個小的應用，當時的想法就是點選一個連結跳轉到另個頁面時，頁面是逐漸顯示出來，也就是由透明到實體的一個過程！

說下思路吧，在body裡用一個div把所有的標籤包含住，在此div後再定義一個div，後面這個div是用來實現漸顯效果的。

如下所示：

我的想法是最後一個div定位在整個頁面最上層，div的背景設為白色，也就完全覆蓋了下面的div，當點選到該頁面時，頁面載入完時，上面這個div開始逐漸消失，下面的div便實現了逐漸顯現的效果。

貼出jQuery程式碼

 

 $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逐漸消失的方法

        }

});

 

程式碼很簡單吧！呵呵！wirte less do more！

自己琢磨出來實現漸顯頁面的思路，也不知道大家的思路是什麼樣的如果有更好的方法歡迎大家一起研究啊！

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/12639172/viewspace-617315/，如需轉載，請註明出處，否則將追究法律責任。