溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

jquery如何實(shí)現(xiàn)元素自動(dòng)消失又顯示

發(fā)布時(shí)間:2021-11-23 17:30:52 來源:億速云 閱讀:196 作者:iii 欄目:web開發(fā)

這篇文章主要講解了“jquery如何實(shí)現(xiàn)元素自動(dòng)消失又顯示”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“jquery如何實(shí)現(xiàn)元素自動(dòng)消失又顯示”吧!

方法:1、利用fadeOut()方法使元素自動(dòng)消失并執(zhí)行指定函數(shù),語法為“$(元素).fadeOut(消失的速度,指定函數(shù);)”;2、在指定函數(shù)中利用fadeIn()方法使元素顯示出來,語法為“$(元素).fadeIn(顯示的速度)”。

jquery如何實(shí)現(xiàn)元素自動(dòng)消失又顯示

本教程操作環(huán)境:windows7系統(tǒng)、jquery1.10.0版本、Dell G3電腦。

jquery怎樣實(shí)現(xiàn)元素自動(dòng)消失又顯示

在jquery中,可以使用fadeOut()方法,fadeIn()方法實(shí)現(xiàn)讓圖片慢慢消失,再自動(dòng)顯示另一張圖片。下面舉例講解jquery如何讓圖片慢慢消失,再顯示另一張圖片。

1、新建一個(gè)html文件,命名為test.html,用于講解jquery如何讓圖片慢慢消失,再自動(dòng)顯示另一張圖片。使用img標(biāo)簽創(chuàng)建一張圖片,并設(shè)置其id為mypic。

在js標(biāo)簽中,通過ready()方法在頁面加載完成時(shí),執(zhí)行function函數(shù)。

jquery如何實(shí)現(xiàn)元素自動(dòng)消失又顯示

2、在function函數(shù)內(nèi),通過id獲得img對象,使用fadeOut()方法實(shí)現(xiàn)圖片3秒內(nèi)慢慢消失,圖片消失后,再執(zhí)行其回調(diào)函數(shù)function。fadeOut() 方法使用淡出效果來隱藏被選元素,假如該元素是隱藏的。

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

jquery如何實(shí)現(xiàn)元素自動(dòng)消失又顯示

在瀏覽器打開test.html文件,查看實(shí)現(xiàn)的效果。

jquery如何實(shí)現(xiàn)元素自動(dòng)消失又顯示

jquery如何實(shí)現(xiàn)元素自動(dòng)消失又顯示

感謝各位的閱讀,以上就是“jquery如何實(shí)現(xiàn)元素自動(dòng)消失又顯示”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對jquery如何實(shí)現(xiàn)元素自動(dòng)消失又顯示這一問題有了更深刻的體會,具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識點(diǎn)的文章,歡迎關(guān)注!

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI