首頁 > 網際網路

jquery怎麼讓一個div漸漸顯示出來

2019-12-12 16:58:36

jquery實現div漸漸顯示出來,需要使用到jquery中的fadeIn()方法,下面介紹jquery怎麼讓一個div漸漸顯示出來。

1

新建一個html檔案,命名為test.html,用於講解jquery怎麼讓一個div漸漸顯示出來。


2

在test.html頁面的頭部載入jquery.min.js檔案,這是使用jquery中的fadeIn()方法的前提。


3

在test.html頁面,建立一個div模組,並且設定其class屬性為pp,用於下面通過該類名獲得該div物件。


4

使用css對上面建立的div進行樣式布局,設定其寬度為300px,高度為100px,背景顏色為紅色,並設定其隱藏屬性,使其不展示出來。


5

在div的下面建立一個class屬性為btn1的按鈕,當該按鈕被點選時,實現使div慢慢出現。


6

給上面的按鈕系結click點選事件,當按鈕被點選時,執行funciton函數 ,在函數內使用fadeIn()方法使div在5秒內漸漸顯示出來,程式碼如下:


7

在瀏覽器開啟test.html檔案,檢視實現的效果,可見當點選「漸漸出現」按鈕時,div從無到有,漸漸顯示出來。





IT145.com E-mail:sddin#qq.com