五：動態效果

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

hide() 隱藏匹配對象

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

當點擊連接時,id為a的對象的display變為none。

show()顯示匹配對象

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

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

hide(speed, callback)  show(speed, callback)當顯示和隱藏變化結束后執行函數callback

toggle()    toggle(speed) 如果當前匹配對象隱藏，則顯示他們，如果當前是顯示的，就隱藏，toggle(speed),其大?。ㄩL寬）和透明度都隨之逐漸變化。

<img src="1.jpg" style="width:150px"/>
<a href="#" onClick='$("img").toggle("slow")'>jQuery</a>

fadeIn(speeds)   fadeOut(speeds) 根據速度調整透明度來顯示或隱藏匹配對象，注意有別于hide(speed)和show(speed)，fadeIn和fadeOut都只調整透明度，不調整大小

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

點擊連接后可以看到圖片逐漸顯示。

fadeIn(speed, callback)  fadeOut(speed, callback)   callback為函數，先通過調整透明度來顯示或隱藏匹配對象，當調整結束后執行callback函數

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

點擊連接后可以看到圖片逐漸顯示,顯示完全后彈出對話框

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

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

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

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

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