這篇文章主要介紹了jquery如何實(shí)現(xiàn)div漸隱效果的相關(guān)知識(shí),內(nèi)容詳細(xì)易懂,操作簡(jiǎn)單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇jquery如何實(shí)現(xiàn)div漸隱效果文章都會(huì)有所收獲,下面我們一起來(lái)看看吧。
創(chuàng)新互聯(lián)公司主要從事網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)玉門,10年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):028-86922220
三種實(shí)現(xiàn)方法:1、用fadeOut()逐漸改變被選元素的不透明度,從可見(jiàn)到隱藏,語(yǔ)法“元素對(duì)象.fadeIn(漸隱時(shí)長(zhǎng))”;2、用fadeTo()逐漸改變被選元素的不透明度,語(yǔ)法“元素對(duì)象.fadeTo(漸隱時(shí)長(zhǎng),0)”;3、用fadeToggle()逐漸改變被選元素的不透明度,語(yǔ)法“元素對(duì)象.fadeToggle(漸隱時(shí)長(zhǎng))”。
本教程操作環(huán)境:windows7系統(tǒng)、jquery3.6.1版本、Dell G3電腦。
在jquery中,能實(shí)現(xiàn)div漸隱效果的有三個(gè)方法:
fadeOut() 方法
fadeToggle() 方法
fadeTo() 方法
1、fadeOut() 方法
fadeOut() 方法逐漸改變被選元素的不透明度,從可見(jiàn)到隱藏(漸隱褪色效果)。
語(yǔ)法:
$(selector).fadeOut(speed,easing,callback)
參數(shù) | 描述 |
---|---|
speed | 可選。規(guī)定褪色效果的速度。 可能的值:
|
easing | 可選。規(guī)定在動(dòng)畫的不同點(diǎn)上元素的速度。默認(rèn)值為 "swing"。 可能的值:
|
callback | 可選。fadeOut() 方法執(zhí)行完之后,要執(zhí)行的回調(diào)函數(shù)。 |
示例:
以下實(shí)例演示了 fadeOut() 使用了不同參數(shù)的效果。
2、fadeTo() 方法
fadeTo() 方法允許漸變?yōu)榻o定的不透明度(值介于 0 與 1 之間)。
語(yǔ)法:
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值:"slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 參數(shù)將淡入淡出效果設(shè)置為給定的不透明度(值介于 0 與 1 之間)。
可選的 callback 參數(shù)是該函數(shù)完成后所執(zhí)行的函數(shù)名稱。
只需要將opacityc參數(shù)的值設(shè)置為0,即可實(shí)現(xiàn)漸隱效果。
$(document).ready(function() { $("button").click(function() { $("#div1").fadeTo("fast",0); $("#div2").fadeTo("slow",0); $("#div3").fadeTo(3000,0); }); });
3、fadeToggle() 方法
fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進(jìn)行切換。
如果元素已隱藏,則 fadeToggle() 會(huì)向元素添加淡入效果。
如果元素已顯示,則 fadeToggle() 會(huì)向元素添加淡出效果。
$(document).ready(function() { $("button").click(function() { $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(5000); }); });
關(guān)于“jquery如何實(shí)現(xiàn)div漸隱效果”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對(duì)“jquery如何實(shí)現(xiàn)div漸隱效果”知識(shí)都有一定的了解,大家如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。