jQuery 使用手冊(cè)(五)

2019-11-21 01:07:24

字體：大中小

供稿：網(wǎng)友

五：動(dòng)態(tài)效果

在將這部分之前我們先看個(gè)例子，相信做網(wǎng)頁(yè)的朋友都遇到n級(jí)菜單的情景，但點(diǎn)擊某菜單按鈕時(shí)，如果它的子菜單是顯示的，則隱藏子菜單，如果子菜單隱藏，則顯示出來(lái)，傳統(tǒng)的javascript做法是先用getElementById取出子菜單所在容器的id，在判斷該容器的style.display是否等于none，如果等于則設(shè)為block,如果不等于這設(shè)為none，如果在將效果設(shè)置復(fù)雜一點(diǎn)，當(dāng)點(diǎn)擊按鈕時(shí)，不是忽然隱藏和顯示子菜單，而是高度平滑的轉(zhuǎn)變，這時(shí)就要通過(guò)setTimeout來(lái)設(shè)置子菜單的height了，再?gòu)?fù)雜一點(diǎn)透明度也平滑的消失和顯現(xiàn)，這時(shí)顯現(xiàn)下來(lái)需要編寫(xiě)很多代碼，如果js 基礎(chǔ)不好的朋友可能只能從別人寫(xiě)好的代碼拿過(guò)來(lái)修改了！jQuery實(shí)現(xiàn)上面效果只需要1句話就行，$("#a").toggle("slow"),,學(xué)完jQuery后還需要抄襲修改別人的代碼嗎？下面我們逐個(gè)介紹jQuery用于效果處理的方法。

hide() 隱藏匹配對(duì)象

<p id="a">Hello Again</p><a href="#" onClick=' ("#a").hide()'>jQuery</a>

當(dāng)點(diǎn)擊連接時(shí),id為a的對(duì)象的display變?yōu)閚one。

show() 顯示匹配對(duì)象

hide(speed) 以一定的速度隱藏匹配對(duì)象，其大小（長(zhǎng)寬）和透明度都逐漸變化到0，speed有3級(jí)("slow", "normal", "fast")，也可以是自定義的速度。

show(speed) 以一定的速度顯示匹配對(duì)象，其大小（長(zhǎng)寬）和透明度都由0逐漸變化到正常

hide(speed, callback) show(speed, callback) 當(dāng)顯示和隱藏變化結(jié)束后執(zhí)行函數(shù)callback

toggle() toggle(speed) 如果當(dāng)前匹配對(duì)象隱藏，則顯示他們，如果當(dāng)前是顯示的，就隱藏，toggle(speed),其大小（長(zhǎng)寬）和透明度都隨之逐漸變化。

<a href="#" onClick='$("img").toggle("slow")'>jQuery</a>

fadeIn(speeds) fadeOut(speeds) 根據(jù)速度調(diào)整透明度來(lái)顯示或隱藏匹配對(duì)象，注意有別于hide(speed)和show(speed)，fadeIn和fadeOut都只調(diào)整透明度，不調(diào)整大小

<img src="1.jpg" style="display:none"/><a href="#" onClick='$("img ").fadeIn("slow")'> jQuery </a>

點(diǎn)擊連接后可以看到圖片逐漸顯示。

fadeIn(speed, callback) fadeOut(speed, callback) callback為函數(shù)，先通過(guò)調(diào)整透明度來(lái)顯示或隱藏匹配對(duì)象，當(dāng)調(diào)整結(jié)束后執(zhí)行callback函數(shù)

<img src="1.jpg"/>
<a href="#" onClick='$("img ").fadeIn("slow",function(){ alert("Animation Done."); })'> jQuery </a>

點(diǎn)擊連接后可以看到圖片逐漸顯示,顯示完全后彈出對(duì)話框

fadeTo(speed, opacity, callback) 將匹配對(duì)象以speed速度調(diào)整倒透明度opacity，然后執(zhí)行函數(shù)callback。Opacity為最終顯示的透明度(0-1).

<img src="1.jpg"/><br>
<a href="#" onClick='$("img ").fadeTo("slow",0.55,function(){ alert("Animation Done."); })'> jQuery </a>

大家可以看一下自己看看效果，如果不用jQuery，編寫(xiě)原始javascript腳本可能很多代碼！

slideDown(speeds) 將匹配對(duì)象的高度由0以指定速率平滑的變化到正常！

<img src="1.jpg" style="display:none"/>
<a href="#" onClick='$("img ").slideDown("slow")'>jQuery</a>

slideDown(speeds,callback) 將匹配對(duì)象的高度由0變化到正常！變化結(jié)束后執(zhí)行函數(shù)callback

slideUp("slow") slideUp(speed, callback) 匹配對(duì)象的高度由正常變化到0

slideToggle("slow") 如果匹配對(duì)象的高度正常則逐漸變化到0，若為0，則逐漸變化到正常

上一篇：jQuery 使用手冊(cè)(六)

下一篇：jQuery 使用手冊(cè)(四)