如何用jquery讓圖片逐漸顯示出來

用jquery讓圖片逐漸顯示出來的方法：首先使用img標籤創建一個圖片，同時創建一個button按鈕；然後在函數內獲得img對象，使用【fadeIn()】方法，在方法內設置指定的秒數，讓圖片逐漸顯示出來。

本教學操作環境：windows7系統、jquery3.2.1版本、thinkpad t480電腦。

用jquery讓圖片逐漸顯示出來的方法：

#1、新建一個html文件，命名為test.html，用於講解jquery如何讓一張圖片逐漸顯示出來。

2、在test.html檔案內，在p標籤，使用img標籤建立一個圖片，並設定圖片的id為myimg，主要用於下面通過該id獲得img物件。

3、在test.html檔案內，設定img標籤的css樣式，將display設定為none，從而實現圖片隱藏不顯示。

4、在test.html檔案內，使用button標籤建立一個按鈕，按鈕名稱為「圖片逐漸顯示」。

5、在test.html檔案中，給button按鈕綁定onclick點擊事件，當按鈕被點擊時，執行disimg（）函數。

6、在js標籤中，建立disimg()函數，在函數內，透過id(myimg)取得img對象，使用fadeIn( )方法讓圖片逐漸顯示出來，例如，設定圖片在5秒內逐漸顯示出來。

7、在瀏覽器開啟test.html文件，點選按鈕，查看實現的效果。

相關免費學習推薦：javascript（影片）

#

以上是如何用jquery讓圖片逐漸顯示出來的詳細內容。更多資訊請關注PHP中文網其他相關文章！