DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> jQuery 使用手冊(五)
jQuery 使用手冊(五)
編輯:關於JavaScript     
jQuery 使用手冊,大家可以耐心的看完,就基本上入門了。

五:動態效果

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

 

<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>


slideDown(speeds,callback) 將匹配對象的高度由0變化到正常!變化結束後執行函數callback

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

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

<p id="a">Hello Again</p><a href="#" onClick=' ("#a").hide()'>jQuery</a>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved