jQuery的動畫函數主要分爲三類:
- 基本動畫函數: 既有透明度漸變, 又有滑動效果. 是最常用的動畫效果函數.
- 滑動動畫函數: 僅使用滑動漸變效果.
- 淡入淡出動畫函數: 僅使用透明度漸變效果.
這三類動畫函數效果各不相同, 用法基本一致. 大家可以自己嘗試.
另外也許上面的三類函數效果都不是我們想要的, 那麼jQuery也提供了自定義動畫函數, 將控制權放在我們手裏讓我們自己定義動畫效果.
下面對三類內置動畫函數和自定義動畫函數分別講解.
基本動畫函數 Basics
| 名稱 | 說明 | 舉例 |
| show( ) |
顯示隱藏的匹配元素。 這個就是 'show( speed, [callback] )' 無動畫的版本。如果選擇的元素是可見的，這個方法將不會改變任何東西。無論這個元素是通過hide()方法隱藏的還是在CSS裏設置了display:none;，這個方法都將有效。 |
顯示所有段落: |
| show( speed, [callback]) |
以優雅的動畫顯示所有匹配的元素，並在顯示完成後可選地觸發一個回調函數。 可以根據指定的速度動態地改變每個匹配元素的高度、寬度和不透明度。在jQuery 1.3中，padding和margin也會有動畫，效果更流暢。 |
用緩慢的動畫將隱藏的段落顯示出來，歷時600毫秒: $("p").show(600); |
| hide( ) |
隱藏顯示的元素 這個就是 'hide( speed, [callback] )' 的無動畫版。如果選擇的元素是隱藏的，這個方法將不會改變任何東西。 |
隱藏所有段落: |
| hide( speed, [callback] ) |
以優雅的動畫隱藏所有匹配的元素，並在顯示完成後可選地觸發一個回調函數。 可以根據指定的速度動態地改變每個匹配元素的高度、寬度和不透明度。在jQuery 1.3中，padding和margin也會有動畫，效果更流暢。 |
用600毫秒的時間將段落緩慢的隱藏: $("p").hide("slow"); |
| toggle( ) |
切換元素的可見狀態。 如果元素是可見的，切換爲隱藏的；如果元素是隱藏的，切換爲可見的。 |
切換所有段落的可見狀態: $("p").toggle() |
| toggle( switch ) |
根據switch參數切換元素的可見狀態（ture爲可見，false爲隱藏）。 如果switch設爲true，則調用show()方法來顯示匹配的元素，如果switch設爲false則調用hide()來隱藏元素。 |
切換所有段落的可見狀態: var flip = 0; |
| toggle( speed, [callback] ) |
以優雅的動畫切換所有匹配的元素，並在顯示完成後可選地觸發一個回調函數。 可以根據指定的速度動態地改變每個匹配元素的高度、寬度和不透明度。在jQuery 1.3中，padding和margin也會有動畫，效果更流暢。 |
用200毫秒將段落迅速切換顯示狀態，之後彈出一個對話框: |
1. 使用基本動畫函數
基本的動畫函數主要分爲show, hide和toggle三個. 都提供了無參數的版本, 表示不適用動畫切換元素的顯示狀態:
$("#divPop").show();$("#divPop").hide();$("#divPop").toggle();
都提供了兩個參數的重載, 因爲回調函數可以省略, 所以可以像開篇實例中使用的, 傳入一個數值作爲唯一參數, 則會在參數規定的時間內用動畫效果顯示/隱藏元素:
$("#divPop").show(200);$("#divPop").hide("fast");$("#divPop").toggle("slow");
如果傳遞了200, 表示圖層會在200毫秒內通過漸變的形式顯示出來. speed參數可以使用三種預定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如：1000).
三個函數都可以傳入回調函數callback,簽名如下:
function callback() { this; // dom element}
在回調函數中的this是執行此函數的DOM對象. 會在動畫結束時執行.2. 使用toggle函數
toggle函數是功能更強大的函數, 可以切換元素的可見狀態. 我們經常遇到需要使用toggle的情況. 比如希望一段文字第一次單擊顯示彈出層, 第二次單擊隱藏彈出層.
- <!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();
- //設置彈出層位置
- var offset = $(event.target).offset(); $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });
- //切換彈出層的顯示狀態
- $("#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()函數可以傳遞一個boolean值的參數, 比如: toogle(true)等同於show(), toogle(fasle)等同於hide().
三. 滑動動畫函數
基本動畫函數的效果是一個綜合了滑動和透明度漸變的函數, jQuery還單獨提供了只有滑動效果的相關函數.滑動動畫函數 Sliding
| 名稱 | 說明 | 舉例 |
| slideDown(speed, [callback]) | 通過高度變化（向下增大）來動態地顯示所有匹配的元素，在顯示完成後可選地觸發一個回調函數。 這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式顯示出來。在jQuery 1.3中，上下的padding和margin也會有動畫，效果更流暢。 | 用600毫秒緩慢的將段落滑下: $("p").slideDown("slow"); |
| slideUp(speed, [callback]) | 通過高度變化（向上減小）來動態地隱藏所有匹配的元素，在隱藏完成後可選地觸發一個回調函數。 | 用600毫秒緩慢的將段落滑上: $("p").slideUp("slow"); |
| slideToggle(speed, [callback]) | 通過高度變化來切換所有匹配元素的可見性，並在切換完成後可選地觸發一個回調函數。 | 用600毫秒緩慢的將段落滑上或滑下: $("p").slideToggle("slow"); |
slideDown就是show的滑動效果版本, slideUp就是hide的滑動效果版本, slideToggle就是toggle的滑動效果版本.
參數完全相同:
$("#divPop").slideDown(200);$("#divPop").slideUp("fast");$("#divPop").slideToggle("slow");