首頁 > web前端 > js教程 > jquery怎樣實現元素自動消失又顯示

jquery怎樣實現元素自動消失又顯示

WBOY
發布: 2021-11-23 16:40:13
原創
1679 人瀏覽過

方法:1、利用fadeOut()方法使元素自動消失並執行指定函數,語法為「$(元素).fadeOut(消失的速度,指定函數;)」;2、在指定函數中利用fadeIn()方法使元素顯示出來,語法為「$(元素).fadeIn(顯示的速度)」。

jquery怎樣實現元素自動消失又顯示

本教學操作環境:windows7系統、jquery1.10.0版本、Dell G3電腦。

jquery怎麼實作元素自動消失又顯示

#在jquery中,可以使用fadeOut()方法,fadeIn()方法實作讓圖片慢慢消失,再自動顯示另一張圖片。以下舉例說明jquery如何讓圖片慢慢消失,再顯示另一張圖片。

1、新建一個html文件,命名為test.html,用於講解jquery如何讓圖片慢慢消失,再自動顯示另一張圖片。使用img標籤建立一張圖片,並設定其id為mypic。

在js標籤中,透過ready()方法在頁面載入完成時,執行function函數。

jquery怎樣實現元素自動消失又顯示

2、在function函數內,透過id獲得img對象,使用fadeOut()方法實現圖片3秒內慢慢消失,圖片消失後,再執行其回呼函數function。 fadeOut() 方法使用淡出效果來隱藏被選元素,假如該元素是隱藏的。

在回呼函數function內,使用attr()方法改變圖片的路徑,替換成另一張圖片,再使用fadeIn()方法讓圖片慢慢顯示出來 。 fadeIn() 方法使用淡入效果來顯示被選元素,假如該元素是隱藏的。

jquery怎樣實現元素自動消失又顯示

在瀏覽器中開啟test.html文件,查看實現的效果。

jquery怎樣實現元素自動消失又顯示

jquery怎樣實現元素自動消失又顯示

#總結:

#1、使用img標籤建立一張圖片,並設定其id為mypic。

2、在js中,透過id取得img對象,使用fadeOut()方法實作圖片3秒內慢慢消失,圖片消失後,再執行其回呼函數function。在回呼函數function內,使用attr()方法改變圖片的路徑,替換成另一張圖片,再使用fadeIn()方法讓圖片慢慢顯示出來 。

相關影片教學推薦:jQuery影片教學

#

以上是jquery怎樣實現元素自動消失又顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板