從零開始學(xué)習(xí)jQuery (七) jQuery動畫實現(xiàn) 讓頁面動起來
一.摘要
本系列文章將帶您進(jìn)入jQuery的精彩世界, 其中有很多作者具體的使用經(jīng)驗和解決方案, 即使你會使用jQuery也能在閱讀中發(fā)現(xiàn)些許秘籍.
開發(fā)人員一直痛疼做動畫. 但是有了jQuery你會瞬間成為別人(那些不知道jQuery的人)眼里的動畫高手! 本文將介紹jQuery的動畫相關(guān)函數(shù).原來做動畫如此簡單!
二.前言
本系列文章的實例都是針對某一個技術(shù)細(xì)節(jié)的, 因為我們要學(xué)習(xí)的是基礎(chǔ)知識, 雖然總有人希望要復(fù)雜一些的應(yīng)用示例, 但是我想還是讓我們先把基礎(chǔ)打牢, 有了扎實的基礎(chǔ)憑借每個人的智慧一定能創(chuàng)造出更多更好的應(yīng)用.
就在寫這篇文章的前幾天, 還有不止一個同事在為了"彈出層"效果而犯愁. 但是以后再面對這樣的功能看過本篇文章的每一個人都可以開心的微笑了. jQuery, make work easy !
三.從實例開始
做web程序經(jīng)常要使用彈出層, 比如單擊文字或按鈕顯示一段提示文字等. 假設(shè)有如下需求: 
- 單擊圖中的"顯示提示文字"按鈕, 在按鈕的下方顯示一個彈出層.
- 單擊任何空白區(qū)域或者彈出層,彈出層消失.
用原始javascript我們也完全可以完成這個工作. 有以下幾點注意事項:
1. 彈出層的位置需要動態(tài)計算. 因為觸發(fā)彈出事件的對象可能出現(xiàn)在頁面的任何位置, 比如截圖中的位置.
2. 為document綁定單擊是關(guān)閉彈出層的函數(shù), 要使用多播委托, 否則可能沖掉其他人在document綁定的函數(shù).
3. 為document綁定了關(guān)閉函數(shù)后, 需要在顯示函數(shù)中取消事件冒泡, 否則彈出層將顯示后立刻關(guān)閉.
用jQuery, 我們可以輕松地實現(xiàn)此實例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery - Start Animation</title> <script type="text/javascript" src="../scripts/jquery-1.3.2-vsdoc2.js"></script> <script type="text/javascript"> $(document).ready(function() { //動畫速度 var speed = 500; //綁定事件處理 $("#btnShow").click(function(event) { //取消事件冒泡 event.stopPropagation(); //設(shè)置彈出層位置 var offset = $(event.target).offset(); $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left }); //動畫顯示 $("#divPop").show(speed); }); //單擊空白區(qū)域隱藏彈出層 $(document).click(function(event) { $("#divPop").hide(speed) }); //單擊彈出層則自身隱藏 $("#divPop").click(function(event) { $("#divPop").hide(speed) }); }); </script> </head> <body> <div> <br /><br /><br /> <button id="btnShow">顯示提示文字</button> </div> <!-- 彈出層 --> <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none; width: 300px; height: 100px;"> <div style="text-align: center;">彈出層</div> </div> </body> </html>
除了實現(xiàn)了基本的顯示和隱藏功能, 現(xiàn)在顯示和隱藏彈出層是漸變動畫效果! jQuery的動畫函數(shù)如此簡單, 第一次我在項目中使用時帶給了我意外的驚喜. 曾經(jīng)我一直為跨瀏覽器計算位置頭痛, 但是通過jQuery的offset()函數(shù)和height()函數(shù), 可以精確的計算彈出層的位置. 這些函數(shù)是封裝好且跨瀏覽器的. 需要注意要在設(shè)置彈出層位置屬性的時候,加上"px", 否則在FireFox下容易出現(xiàn)問題.
jQuery的動畫函數(shù)主要分為三類:
- 基本動畫函數(shù): 既有透明度漸變, 又有滑動效果. 是最常用的動畫效果函數(shù).
- 滑動動畫函數(shù): 僅使用滑動漸變效果.
- 淡入淡出動畫函數(shù): 僅使用透明度漸變效果.
這三類動畫函數(shù)效果各不相同, 用法基本一致. 大家可以自己嘗試.
另外也許上面的三類函數(shù)效果都不是我們想要的, 那么jQuery也提供了自定義動畫函數(shù), 將控制權(quán)放在我們手里讓我們自己定義動畫效果.
下面對三類內(nèi)置動畫函數(shù)和自定義動畫函數(shù)分別講解.
四. 基本動畫函數(shù)
上例中使用的show()和hide()是我們使用最多的基本動畫函數(shù).
下面是jQuery的基本動畫函數(shù):
基本動畫函數(shù) Basics
| 名稱 | 說明 | 舉例 |
| show( ) |
顯示隱藏的匹配元素。 這個就是 'show( speed, [callback] )' 無動畫的版本。如果選擇的元素是可見的，這個方法將不會改變?nèi)魏螙|西。無論這個元素是通過hide()方法隱藏的還是在CSS里設(shè)置了display:none;，這個方法都將有效。 |
顯示所有段落: |
| show( speed, [callback]) |
以優(yōu)雅的動畫顯示所有匹配的元素，并在顯示完成后可選地觸發(fā)一個回調(diào)函數(shù)。 可以根據(jù)指定的速度動態(tài)地改變每個匹配元素的高度、寬度和不透明度。在jQuery 1.3中，padding和margin也會有動畫，效果更流暢。 |
用緩慢的動畫將隱藏的段落顯示出來，歷時600毫秒: $("p").show(600); |
| hide( ) |
隱藏顯示的元素 這個就是 'hide( speed, [callback] )' 的無動畫版。如果選擇的元素是隱藏的，這個方法將不會改變?nèi)魏螙|西。 |
隱藏所有段落: |
| hide( speed, [callback] ) |
以優(yōu)雅的動畫隱藏所有匹配的元素，并在顯示完成后可選地觸發(fā)一個回調(diào)函數(shù)。 可以根據(jù)指定的速度動態(tài)地改變每個匹配元素的高度、寬度和不透明度。在jQuery 1.3中，padding和margin也會有動畫，效果更流暢。 |
用600毫秒的時間將段落緩慢的隱藏: $("p").hide("slow"); |
| toggle( ) |
切換元素的可見狀態(tài)。 如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。 |
切換所有段落的可見狀態(tài): $("p").toggle() |
| toggle( switch ) |
根據(jù)switch參數(shù)切換元素的可見狀態(tài)（ture為可見，false為隱藏）。 如果switch設(shè)為true，則調(diào)用show()方法來顯示匹配的元素，如果switch設(shè)為false則調(diào)用hide()來隱藏元素。 |
切換所有段落的可見狀態(tài): var flip = 0; |
| toggle( speed, [callback] ) |
以優(yōu)雅的動畫切換所有匹配的元素，并在顯示完成后可選地觸發(fā)一個回調(diào)函數(shù)。 可以根據(jù)指定的速度動態(tài)地改變每個匹配元素的高度、寬度和不透明度。在jQuery 1.3中，padding和margin也會有動畫，效果更流暢。 |
用200毫秒將段落迅速切換顯示狀態(tài)，之后彈出一個對話框: |
1. 使用基本動畫函數(shù)
基本的動畫函數(shù)主要分為show, hide和toggle三個. 都提供了無參數(shù)的版本, 表示不適用動畫切換元素的顯示狀態(tài):
$("#divPop").show(); $("#divPop").hide(); $("#divPop").toggle();
都提供了兩個參數(shù)的重載, 因為回調(diào)函數(shù)可以省略, 所以可以像開篇實例中使用的, 傳入一個數(shù)值作為唯一參數(shù), 則會在參數(shù)規(guī)定的時間內(nèi)用動畫效果顯示/隱藏元素:
$("#divPop").show(200); $("#divPop").hide("fast"); $("#divPop").toggle("slow");
如果傳遞了200, 表示圖層會在200毫秒內(nèi)通過漸變的形式顯示出來. speed參數(shù)可以使用三種預(yù)定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數(shù)值(如：1000).
三個函數(shù)都可以傳入回調(diào)函數(shù)callback,簽名如下:
function callback() { this; // dom element }
在回調(diào)函數(shù)中的this是執(zhí)行此函數(shù)的DOM對象. 會在動畫結(jié)束時執(zhí)行.
2. 使用toggle函數(shù)
toggle函數(shù)是功能更強(qiáng)大的函數(shù), 可以切換元素的可見狀態(tài). 我們經(jīng)常遇到需要使用toggle的情況. 比如希望一段文字第一次單擊顯示彈出層, 第二次單擊隱藏彈出層.
我們將開篇實例稍作修改即可實現(xiàn)這個效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery Animation - Toggle </title> <script type="text/javascript" src="../scripts/jquery-1.3.2-vsdoc2.js"></script> <script type="text/javascript"> $(document).ready(function() { //動畫速度 var speed = 500; //綁定事件處理 $("#btnShow").click(function(event) { //取消事件冒泡 event.stopPropagation(); //設(shè)置彈出層位置 var offset = $(event.target).offset(); $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left }); //切換彈出層的顯示狀態(tài) $("#divPop").toggle(speed); }); }); </script> </head> <body> <div> <br /><br /><br /> <button id="btnShow">提示文字</button> </div> <!-- 彈出層 --> <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none; width: 300px; height: 100px;"> <div style="text-align: center;">彈出層</div> </div> </body> </html>
toggle()函數(shù)可以傳遞一個boolean值的參數(shù), 比如: toogle(true)等同于show(), toogle(fasle)等同于hide().
五. 滑動動畫函數(shù)
基本動畫函數(shù)的效果是一個綜合了滑動和透明度漸變的函數(shù), jQuery還單獨提供了只有滑動效果的相關(guān)函數(shù).
滑動動畫函數(shù) Sliding
| 名稱 | 說明 | 舉例 |
| slideDown(speed, [callback]) |
通過高度變化（向下增大）來動態(tài)地顯示所有匹配的元素，在顯示完成后可選地觸發(fā)一個回調(diào)函數(shù)。 這個動畫效果只調(diào)整元素的高度，可以使匹配的元素以“滑動”的方式顯示出來。在jQuery 1.3中，上下的padding和margin也會有動畫，效果更流暢。 |
用600毫秒緩慢的將段落滑下: $("p").slideDown("slow"); |
| slideUp(speed, [callback]) | 通過高度變化（向上減?。﹣韯討B(tài)地隱藏所有匹配的元素，在隱藏完成后可選地觸發(fā)一個回調(diào)函數(shù)。 | 用600毫秒緩慢的將段落滑上: $("p").slideUp("slow"); |
| slideToggle(speed, [callback]) | 通過高度變化來切換所有匹配元素的可見性，并在切換完成后可選地觸發(fā)一個回調(diào)函數(shù)。 | 用600毫秒緩慢的將段落滑上或滑下: $("p").slideToggle("slow"); |
講解
slideDown就是show的滑動效果版本, slideUp就是hide的滑動效果版本, slideToggle就是toggle的滑動效果版本.
參數(shù)完全相同:
$("#divPop").slideDown(200); $("#divPop").slideUp("fast"); $("#divPop").slideToggle("slow");
六.淡入淡出動畫函數(shù)
淡出淡出函數(shù)只提供透明度漸變的效果.
淡入淡出函數(shù) Fading
| 名稱 | 說明 | 舉例 |
| fadeIn( speed, [callback] ) |
通過不透明度的變化來實現(xiàn)所有匹配元素的淡入效果，并在動畫完成后可選地觸發(fā)一個回調(diào)函數(shù)。 這個動畫只調(diào)整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發(fā)生變化。 |
用600毫秒緩慢的將段落淡入: $("p").fadeIn("slow"); |
| fadeOut( speed, [callback] ) | 通過不透明度的變化來實現(xiàn)所有匹配元素的淡出效果，并在動畫完成后可選地觸發(fā)一個回調(diào)函數(shù)。 | 用600毫秒緩慢的將段落淡出: $("p").fadeOut("slow"); |
| fadeTo(speed, opacity, [callback]) | 把所有匹配元素的不透明度以漸進(jìn)方式調(diào)整到指定的不透明度，并在動畫完成后可選地觸發(fā)一個回調(diào)函數(shù)。 | 用600毫秒緩慢的將段落的透明度調(diào)整到0.66，大約2/3的可見度: $("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66); |
講解
fadeIn和fadeOut兩個函數(shù)對應(yīng)show和hide, 用于將對象以透明度漸變的效果顯示和隱藏:
$("#divPop").fadeIn(200); $("#divPop").fadeOut("fast");
透明度漸變沒有切換函數(shù).
需要特別講解的是fadeTo函數(shù). 這個函數(shù)能讓對象漸變到指定的透明度上. opacity參數(shù)取值從0-1, 比如0.6表示透明度為60%.
和fadeIn與fadeOut不同的是, fadeTo函數(shù)只改變對象的透明度, 即使透明度為0對象仍然占位. 而fadeIn和fadeOut最后一定會改變對象的display屬性, fadeOut后對象將從頁面上消失(不占位), 但是fadeTo僅僅是讓其透明(占位).
fadeTo函數(shù)可以配合fadeIn使用. 比如默認(rèn)的情況下, fadeIn最后讓對象完全顯示:
但是如果之前使用過fadeTo設(shè)置彈出層的透明度, 則可以讓其以半透明:
核心代碼如下:
//設(shè)置彈出層的透明度 $("#divPop").fadeTo(0, 0.66); //讓彈出層透明顯示 if ($("#divPop").css("display") == "none") { $("#divPop").fadeIn(speed); } else { $("#divPop").fadeOut(speed); }
用fadeTo設(shè)置了彈出層透明度后, 在使用fadeIn會讓對象顯示并且漸變到fadeTo設(shè)置的透明度.
這里介紹的僅僅是兩個函數(shù)的特性, 實際應(yīng)用中并不一定要兩者配合使用.
六. 動畫實驗室
動畫實驗室是"jQuery實戰(zhàn)"一書中的示例, 方便我們查看上面三種動畫的效果. 對應(yīng)源代碼的 chapter7\lab.effects.html 文件.源代碼在本文最后提供下載.實驗室截圖如下:
七.自定義動畫函數(shù)
上面三個漸變動畫函數(shù)已經(jīng)基本滿足了我們?nèi)粘Ｐ枨? 但是如果我們一定要創(chuàng)建自己的特殊的效果, jQuery也為我們提供了相關(guān)函數(shù).
自定義動畫函數(shù) Custom
| 名稱 | 說明 | 舉例 |
| animate( params, [duration], [easing], [callback] ) |
用于創(chuàng)建自定義動畫的函數(shù)。 這個函數(shù)的關(guān)鍵在于指定動畫形式及結(jié)果樣式屬性對象。這個對象中每個屬性都表示一個可以變化的樣式屬性（如“height”、“top”或“opacity”）。注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left. 而每個屬性的值表示這個樣式屬性到多少時動畫結(jié)束。如果是一個數(shù)值，樣式屬性就會從當(dāng)前的值漸變到指定的值。如果使用的是“hide”、“show”或“toggle”這樣的字符串值，則會為該屬性調(diào)用默認(rèn)的動畫形式。 在 jQuery 1.2 中，你可以使用 em 和 % 單位。另外，在 jQuery 1.2 中，你可以通過在屬性值前面指定 "+=" 或 "-=" 來讓元素做相對運動。 jQuery 1.3中，如果duration設(shè)為0則直接完成動畫。而在以前版本中則會執(zhí)行默認(rèn)動畫。 |
點擊按鈕后div元素的幾個不同屬性一同變化: // 在一個動畫中同時應(yīng)用三種類型的效果 |
| animate( params, options ) |
用于創(chuàng)建自定義動畫的函數(shù)。 這個函數(shù)的關(guān)鍵在于指定動畫形式及結(jié)果樣式屬性對象。這個對象中每個屬性都表示一個可以變化的樣式屬性（如“height”、“top”或“opacity”）。注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left. 而每個屬性的值表示這個樣式屬性到多少時動畫結(jié)束。如果是一個數(shù)值，樣式屬性就會從當(dāng)前的值漸變到指定的值。如果使用的是“hide”、“show”或“toggle”這樣的字符串值，則會為該屬性調(diào)用默認(rèn)的動畫形式。 在 jQuery 1.2 中，你可以使用 em 和 % 單位。另外，在 jQuery 1.2 中，你可以通過在屬性值前面指定 "+=" 或 "-=" 來讓元素做相對運動。 |
第一個按鈕按了之后展示了不在隊列中的動畫。在div擴(kuò)展到90%的同時也在增加字體，一旦字體改變完畢后，邊框的動畫才開始: $("#go1").click(function(){ $("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } ) .animate( { fontSize: '10em' } , 1000 ) .animate( { borderWidth: 5 }, 1000); }); $("#go2").click(function(){ $("#block2").animate( { width: "90%"}, 1000 ) .animate( { fontSize: '10em' } , 1000 ) .animate( { borderWidth: 5 }, 1000); }); |
| stop( [clearQueue], [gotoEnd] ) |
停止所有在指定元素上正在運行的動畫。 如果隊列中有等待執(zhí)行的動畫(并且clearQueue沒有設(shè)為true)，他們將被馬上執(zhí)行
gotoEnd (Boolean):讓當(dāng)前正在執(zhí)行的動畫立即完成，并且重設(shè)show和hide的原始樣式，調(diào)用回調(diào)函數(shù)等。 |
點擊Go之后開始動畫,點Stop之后會在當(dāng)前位置停下來: |
參數(shù)說明
1.params(可選)
類型:Options
說明:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合.
講解:通過把元素的樣式屬性值, 從當(dāng)前值逐漸調(diào)整到params設(shè)置的值而產(chǎn)生動畫效果.
2.duration(可選)
類型:String,Number
說明:三種預(yù)定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數(shù)值(如：1000)
講解:動畫效果持續(xù)的時間, 時間越長則變得越慢. 如果省略則不會產(chǎn)生動畫.
3.easing(可選)
類型:String
說明:要使用的擦除效果的名稱(需要插件支持).默認(rèn)jQuery提供"linear" 和 "swing".
講解:為了讓元素逐漸達(dá)到params設(shè)置的最終效果, 我們需要有一個函數(shù)來實現(xiàn)漸變, 這類函數(shù)就叫做easing函數(shù). 但是需要這里傳遞的只是easing函數(shù)名稱, 使用前需要先將easing函數(shù)注冊到j(luò)Query上.
4.options參數(shù)
類型:Options
說明:一組包含動畫選項的值的集合。
講解:所支持的屬性如下:
- duration: 與上面的duration參數(shù)相同
- easing: 與上面的easing參數(shù)相同
- complete :類型為Function, 在動畫完成時執(zhí)行的函數(shù)
- step: Callback
- queue (Boolean): (默認(rèn)值: true) 設(shè)定為false將使此動畫不進(jìn)入動畫隊列 (jQuery 1.2中新增)
講解
自定義動畫屬于高級應(yīng)用, 在這里我暫時無法做詳細(xì)的講解.下面通過兩個示例讓大家簡單了解如何使用自定義動畫.
Bug提示: 下面兩個示例使用vsdoc2智能提示版本的jQuery類庫在FireFox下存在透明度無法漸變的問題. 請使用其他版本.
自定義墜落動畫:
這個示例讓一個圖層從屏幕最上方掉落到最下方, 并且消失.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery Animation - fadeTo </title> <script type="text/javascript" src="../scripts/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#divPop") .animate( { "opacity": "hide", "top": $(window).height() - $("#divPop").height() - $("#divPop").position().top }, 600, function() { $("#divPop").hide(); } ); }); </script> </head> <body> <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; width: 300px; height: 100px; position:absolute;"> <div style="text-align: center;">彈出層</div> </div> </body> </html>
自定義消散動畫:
這個示例讓一個div越來越大最后消失:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery Animation - fadeTo </title> <script type="text/javascript" src="../scripts/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#divPop") .animate( { "opacity": "hide", "width": $(window).width()-100 , "height": $(window).height()-100 }, 500 ); }); </script> </head> <body> <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; width: 300px; height: 100px; position:absolute;"> <div style="text-align: center;">彈出層</div> </div> </body> </html>
八.全局控制屬性
最后講一下和動畫相關(guān)的屬性:
名稱: jQuery.fx.off
返回值: Boolean
說明:
關(guān)閉頁面上所有的動畫。
講解:
把這個屬性設(shè)置為true可以立即關(guān)閉所有動畫(所有效果會立即執(zhí)行完畢)。有些情況下可能需要這樣，比如：
* 你在配置比較低的電腦上使用jQuery。
* 你的一些用戶由于動畫效果而遇到了 可訪問性問題
當(dāng)把這個屬性設(shè)成false之后，可以重新開啟所有動畫。
比如下面的代碼會執(zhí)行一個禁用的動畫:
jQuery.fx.off = true; $("#divPop").show(1000);
雖然使用了動畫效果的show函數(shù), 但是因為關(guān)閉了所有動畫, 所以div會立刻顯示出來而沒有漸變效果.
九.總結(jié)
本文講解了jQuery提供的三種動畫函數(shù):基本動畫, 滑動動畫和淡入淡出動畫. 使用這三種動畫已經(jīng)基本可以滿足我們的日常開發(fā)需求, 讓我們的頁面動起來. 簡單舉例講解了自定義動畫. 對于想深入研究的人本文只能起到拋磚引玉的效果.
代碼下載:http://xiazai.jb51.net/201101/yuanma/Code-jQueryStudy.rar
相關(guān)文章
jquery 結(jié)合C#后臺的數(shù)組對文章的關(guān)鍵字自動添加鏈接的代碼
toggle一個div顯示或隱藏且可擴(kuò)展成自定義下拉框
jquery使用$(element).is()來判斷獲取的tagName
