<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html"></a>
<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html">從零開始學習jQuery (一) 開天辟地入門篇</a>
<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/03/jQuery-Learn-2.html">從零開始學習jQuery (二) 萬能的選擇器</a>
<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/04/jQuery-Learn-3.html">從零開始學習jQuery (三) 管理jQuery包裝集</a>
<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/05/jQuery-Learn-4.html">從零開始學習jQuery (四) 使用jQuery操作元素的屬性與樣式</a>
<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/06/jQuery-Learn-5.html">從零開始學習jQuery (五) 事件與事件對象</a>
<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/08/jQuery-Learn-6.html">從零開始學習jQuery (六) jQuery中的Ajax</a>
<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/11/jQuery-Learn-7.html">從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!</a>
<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/12/jQuery-Learn-8.html">從零開始學習jQuery (八) 插播:jQuery實施方案</a>
<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/12/jQuery-Learn-9.html">從零開始學習jQuery (九) jQuery工具函數</a>
<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/06/jQuery-Learn-10.html">從零開始學習jQuery (十) jQueryUI常用功能實戰</a>
<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/22/jQuery-Learn-11.html">從零開始學習jQuery (十一) 實戰表單驗證與自動完成提示插件</a>
本系列文章将帶您進入jQuery的精彩世界, 其中有很多作者具體的使用經驗和解決方案, 即使你會使用jQuery也能在閱讀中發現些許秘籍.
開發人員一直痛疼做動畫. 但是有了jQuery你會瞬間成為别人(那些不知道jQuery的人)眼裡的動畫高手! 本文将介紹jQuery的動畫相關函數.原來做動畫如此簡單!
本系列文章的執行個體都是針對某一個技術細節的, 因為我們要學習的是基礎知識, 雖然總有人希望要複雜一些的應用示例, 但是我想還是讓我們先把基礎打牢, 有了紮實的基礎憑借每個人的智慧一定能創造出更多更好的應用.
就在寫這篇文章的前幾天, 還有不止一個同僚在為了"彈出層"效果而犯愁. 但是以後再面對這樣的功能看過本篇文章的每一個人都可以開心的微笑了. jQuery, make work easy !
做web程式經常要使用彈出層, 比如單擊文字或按鈕顯示一段提示文字等. 假設有如下需求:
單擊圖中的"顯示提示文字"按鈕, 在按鈕的下方顯示一個彈出層. 單擊任何空白區域或者彈出層,彈出層消失.
用原始javascript我們也完全可以完成這個工作. 有以下幾點注意事項:
1. 彈出層的位置需要動态計算. 因為觸發彈出事件的對象可能出現在頁面的任何位置, 比如截圖中的位置.
2. 為document綁定單擊是關閉彈出層的函數, 要使用多點傳播委托, 否則可能沖掉其他人在document綁定的函數.
3. 為document綁定了關閉函數後, 需要在顯示函數中取消事件冒泡, 否則彈出層将顯示後立刻關閉.
用jQuery, 我們可以輕松地實作此執行個體:
除了實作了基本的顯示和隐藏功能, 現在顯示和隐藏彈出層是漸變動畫效果! jQuery的動畫函數如此簡單, 第一次我在項目中使用時帶給了我意外的驚喜. 曾經我一直為跨浏覽器計算位置頭痛, 但是通過jQuery的offset()函數和height()函數, 可以精确的計算彈出層的位置. 這些函數是封裝好且跨浏覽器的. 需要注意要在設定彈出層位置屬性的時候,加上"px", 否則在FireFox下容易出現問題.
jQuery的動畫函數主要分為三類:
基本動畫函數: 既有透明度漸變, 又有滑動效果. 是最常用的動畫效果函數.
滑動動畫函數: 僅使用滑動漸變效果.
淡入淡出動畫函數: 僅使用透明度漸變效果.
這三類動畫函數效果各不相同, 用法基本一緻. 大家可以自己嘗試.
另外也許上面的三類函數效果都不是我們想要的, 那麼jQuery也提供了自定義動畫函數, 将控制權放在我們手裡讓我們自己定義動畫效果.
下面對三類内置動畫函數和自定義動畫函數分别講解.
上例中使用的show()和hide()是我們使用最多的基本動畫函數.
下面是jQuery的基本動畫函數:
名稱
說明
舉例
顯示隐藏的比對元素。
這個就是 'show( speed, [callback] )' 無動畫的版本。如果選擇的元素是可見的，這個方法将不會改變任何東西。無論這個元素是通過hide()方法隐藏的還是在CSS裡設定了display:none;，這個方法都将有效。
顯示所有段落:
以優雅的動畫顯示所有比對的元素，并在顯示完成後可選地觸發一個回調函數。
可以根據指定的速度動态地改變每個比對元素的高度、寬度和不透明度。在jQuery 1.3中，padding和margin也會有動畫，效果更流暢。
用緩慢的動畫将隐藏的段落顯示出來，曆時600毫秒:
<code>$("p").show(600);</code>
隐藏顯示的元素
這個就是 'hide( speed, [callback] )' 的無動畫版。如果選擇的元素是隐藏的，這個方法将不會改變任何東西。
隐藏所有段落:
以優雅的動畫隐藏所有比對的元素，并在顯示完成後可選地觸發一個回調函數。
用600毫秒的時間将段落緩慢的隐藏:
<code>$("p").hide("slow");</code>
切換元素的可見狀态。
如果元素是可見的，切換為隐藏的；如果元素是隐藏的，切換為可見的。
切換所有段落的可見狀态:
<code>$("p").toggle()</code>
根據switch參數切換元素的可見狀态（ture為可見，false為隐藏）。
如果switch設為true，則調用show()方法來顯示比對的元素，如果switch設為false則調用hide()來隐藏元素。
<code>var flip = 0; $("button").click(function () { $("p").toggle( flip++ % 2 == 0 ); });</code>
以優雅的動畫切換所有比對的元素，并在顯示完成後可選地觸發一個回調函數。
用200毫秒将段落迅速切換顯示狀态，之後彈出一個對話框:
基本的動畫函數主要分為show, hide和toggle三個. 都提供了無參數的版本, 表示不适用動畫切換元素的顯示狀态:
都提供了兩個參數的重載, 因為回調函數可以省略, 是以可以像開篇執行個體中使用的, 傳入一個數值作為唯一參數, 則會在參數規定的時間内用動畫效果顯示/隐藏元素:
如果傳遞了200, 表示圖層會在200毫秒内通過漸變的形式顯示出來. speed參數可以使用三種預定速度之一的字元串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如：1000).
三個函數都可以傳入回調函數callback,簽名如下:
在回調函數中的this是執行此函數的DOM對象. 會在動畫結束時執行.
toggle函數是功能更強大的函數, 可以切換元素的可見狀态. 我們經常遇到需要使用toggle的情況. 比如希望一段文字第一次單擊顯示彈出層, 第二次單擊隐藏彈出層.
我們将開篇執行個體稍作修改即可實作這個效果:
toggle()函數可以傳遞一個boolean值的參數, 比如: toogle(true)等同于show(), toogle(fasle)等同于hide().
基本動畫函數的效果是一個綜合了滑動和透明度漸變的函數, jQuery還單獨提供了隻有滑動效果的相關函數.
通過高度變化（向下增大）來動态地顯示所有比對的元素，在顯示完成後可選地觸發一個回調函數。
這個動畫效果隻調整元素的高度，可以使比對的元素以“滑動”的方式顯示出來。在jQuery 1.3中，上下的padding和margin也會有動畫，效果更流暢。
用600毫秒緩慢的将段落滑下:
<code>$("p").slideDown("slow");</code>
通過高度變化（向上減小）來動态地隐藏所有比對的元素，在隐藏完成後可選地觸發一個回調函數。
用600毫秒緩慢的将段落滑上:
<code>$("p").slideUp("slow");</code>
通過高度變化來切換所有比對元素的可見性，并在切換完成後可選地觸發一個回調函數。
用600毫秒緩慢的将段落滑上或滑下:
<code>$("p").slideToggle("slow");</code>
slideDown就是show的滑動效果版本, slideUp就是hide的滑動效果版本, slideToggle就是toggle的滑動效果版本.
參數完全相同:
淡出淡出函數隻提供透明度漸變的效果.
通過不透明度的變化來實作所有比對元素的淡入效果，并在動畫完成後可選地觸發一個回調函數。
這個動畫隻調整元素的不透明度，也就是說所有比對的元素的高度和寬度不會發生變化。
用600毫秒緩慢的将段落淡入:
<code>$("p").fadeIn("slow");</code>
通過不透明度的變化來實作所有比對元素的淡出效果，并在動畫完成後可選地觸發一個回調函數。
用600毫秒緩慢的将段落淡出:
<code>$("p").fadeOut("slow");</code>
把所有比對元素的不透明度以漸進方式調整到指定的不透明度，并在動畫完成後可選地觸發一個回調函數。
用600毫秒緩慢的将段落的透明度調整到0.66，大約2/3的可見度:
<code>$("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66);</code>
fadeIn和fadeOut兩個函數對應show和hide, 用于将對象以透明度漸變的效果顯示和隐藏:
透明度漸變沒有切換函數.
需要特别講解的是fadeTo函數. 這個函數能讓對象漸變到指定的透明度上. opacity參數取值從0-1, 比如0.6表示透明度為60%.
和fadeIn與fadeOut不同的是, fadeTo函數隻改變對象的透明度, 即使透明度為0對象仍然占位. 而fadeIn和fadeOut最後一定會改變對象的display屬性, fadeOut後對象将從頁面上消失(不占位), 但是fadeTo僅僅是讓其透明(占位).
fadeTo函數可以配合fadeIn使用. 比如預設的情況下, fadeIn最後讓對象完全顯示:
但是如果之前使用過fadeTo設定彈出層的透明度, 則可以讓其以半透明:
核心代碼如下:
用fadeTo設定了彈出層透明度後, 在使用fadeIn會讓對象顯示并且漸變到fadeTo設定的透明度.
這裡介紹的僅僅是兩個函數的特性, 實際應用中并不一定要兩者配合使用.
動畫實驗室是"jQuery實戰"一書中的示例, 友善我們檢視上面三種動畫的效果. 對應源代碼的 chapter7\lab.effects.html 檔案.源代碼在本文最後提供下載下傳.實驗室截圖如下:
上面三個漸變動畫函數已經基本滿足了我們日常需求. 但是如果我們一定要建立自己的特殊的效果, jQuery也為我們提供了相關函數.
用于建立自定義動畫的函數。
這個函數的關鍵在于指定動畫形式及結果樣式屬性對象。這個對象中每個屬性都表示一個可以變化的樣式屬性（如“height”、“top”或“opacity”）。注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left.
而每個屬性的值表示這個樣式屬性到多少時動畫結束。如果是一個數值，樣式屬性就會從目前的值漸變到指定的值。如果使用的是“hide”、“show”或“toggle”這樣的字元串值，則會為該屬性調用預設的動畫形式。
在 jQuery 1.2 中，你可以使用 em 和 % 機關。另外，在 jQuery 1.2 中，你可以通過在屬性值前面指定 "+=" 或 "-=" 來讓元素做相對運動。
jQuery 1.3中，如果duration設為0則直接完成動畫。而在以前版本中則會執行預設動畫。
點選按鈕後div元素的幾個不同屬性一同變化:
<code>// 在一個動畫中同時應用三種類型的效果 $("#go").click(function(){ $("#block").animate({ width: "90%", height: "100%", fontSize: "10em", borderWidth: 10 }, 1000 ); });</code>
第一個按鈕按了之後展示了不在隊列中的動畫。在div擴充到90%的同時也在增加字型，一旦字型改變完畢後，邊框的動畫才開始:
<code>$("#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); });</code>
停止所有在指定元素上正在運作的動畫。
如果隊列中有等待執行的動畫(并且clearQueue沒有設為true)，他們将被馬上執行
clearQueue(Boolean):如果設定成true，則清空隊列。可以立即結束動畫。
gotoEnd (Boolean):讓目前正在執行的動畫立即完成，并且重設show和hide的原始樣式，調用回調函數等。
點選Go之後開始動畫,點Stop之後會在目前位置停下來:
1.params(可選)
類型:Options
說明:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合.
講解:通過把元素的樣式屬性值, 從目前值逐漸調整到params設定的值而産生動畫效果.
2.duration(可選)
類型:String,Number
說明:三種預定速度之一的字元串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
講解:動畫效果持續的時間, 時間越長則變得越慢. 如果省略則不會産生動畫.
3.easing(可選)
類型:String
說明:要使用的擦除效果的名稱(需要插件支援).預設jQuery提供"linear" 和 "swing".
講解:為了讓元素逐漸達到params設定的最終效果, 我們需要有一個函數來實作漸變, 這類函數就叫做easing函數. 但是需要這裡傳遞的隻是easing函數名稱, 使用前需要先将easing函數注冊到jQuery上.
4.options參數
說明:一組包含動畫選項的值的集合。
講解:所支援的屬性如下:
duration: 與上面的duration參數相同
easing: 與上面的easing參數相同
complete :類型為Function, 在動畫完成時執行的函數
queue (Boolean): (預設值: true) 設定為false将使此動畫不進入動畫隊列 (jQuery 1.2中新增)
自定義動畫屬于進階應用, 在這裡我暫時無法做詳細的講解.下面通過兩個示例讓大家簡單了解如何使用自定義動畫.
Bug提示: 下面兩個示例使用vsdoc2智能提示版本的jQuery類庫在FireFox下存在透明度無法漸變的問題. 請使用其他版本.
這個示例讓一個圖層從螢幕最上方掉落到最下方, 并且消失.
這個示例讓一個div越來越大最後消失:
最後講一下和動畫相關的屬性:
說明:
關閉頁面上所有的動畫。
講解:
把這個屬性設定為true可以立即關閉所有動畫(所有效果會立即執行完畢)。有些情況下可能需要這樣，比如：
* 你在配置比較低的電腦上使用jQuery。
當把這個屬性設成false之後，可以重新開啟所有動畫。
比如下面的代碼會執行一個禁用的動畫:
雖然使用了動畫效果的show函數, 但是因為關閉了所有動畫, 是以div會立刻顯示出來而沒有漸變效果.
本文講解了jQuery提供的三種動畫函數:基本動畫, 滑動動畫和淡入淡出動畫. 使用這三種動畫已經基本可以滿足我們的日常開發需求, 讓我們的頁面動起來. 簡單舉例講解了自定義動畫. 對于想深入研究的人本文隻能起到抛磚引玉的效果.
代碼下載下傳:
<a href="http://files.cnblogs.com/zhangziqiu/Code-jQueryStudy.rar">http://files.cnblogs.com/zhangziqiu/Code-jQueryStudy.rar</a>