- /**
- * 隱藏顯示的元素。
- *
- * 這個就是 "hide( speed, [callback] )" 的無動畫版。如果選擇的元素是隱藏的,這個方法將不會改變
- * 任何東西。
- *
- * @return jQuery Object
- * @owner jQuery Object
- */
- function hide();
- // 例子:隱藏所有段落。
- $("p").hide();
● hide(speed, [callback])
- /**
- * 以優雅的動畫隱藏所有匹配的元素,並在顯示完成後可選地觸發一個回調函數。
- *
- * 可以根據指定的速度動態地改變每個匹配元素的高度、寬度和不透明度。
- *
- * @speed(String, Number) 三種預定速度之一的字符串("slow", "normal", or "fast")
- * 或表示動畫時長的毫秒數值(如:1000)
- * @callback(Function) (可選) 在動畫完成時執行的函數,每個元素執行一次
- * @return jQuery Object
- * @owner jQuery Object
- */
- function hide(speed, [callback]);
- // 例子一:用 600 毫秒的時間將段落緩慢的隱藏。
- $("p").hide("slow");
- // 例子二:用 200 毫秒將段落迅速隱藏,之後彈出一個對話框。
- $("p").hide("fast", function() {
- alert("Animation Done.");
- });
● show()
- /**
- * 顯示隱藏的匹配元素。
- *
- * 這個就是 "show( speed, [callback] )" 無動畫的版本。如果選擇的元素是可見的,這個方法將不會改變任
- * 何東西。無論這個元素是通過 hide() 方法隱藏的還是在 CSS 裏設置了 display:none; 這個方法都將有效。
- *
- * @return jQuery Object
- * @owner jQuery Object
- */
- function show();
- // 例子:顯示所有段落。
- $("p").show();
● show(speed, [callback])
- /**
- * 顯以優雅的動畫顯示所有匹配的元素,並在顯示完成後可選地觸發一個回調函數。
- *
- * 可以根據指定的速度動態地改變每個匹配元素的高度、寬度和不透明度。
- *
- * @speed(String, Number) 三種預定速度之一的字符串("slow", "normal", or "fast")
- * 或表示動畫時長的毫秒數值(如:1000)
- * @callback(Function) (可選) 在動畫完成時執行的函數,每個元素執行一次
- * @return jQuery Object
- * @owner jQuery Object
- */
- function show(speed, [callback]);
- // 例子一:用緩慢的動畫將隱藏的段落顯示出來,歷時 600 毫秒。
- $("p").show("slow");
- // 例子二:用迅速的動畫將隱藏的段落顯示出來,歷時 200 毫秒。並在之後執行反饋。
- $("p").show("fast", function() {
- $(this).text("Animation Done!");
- });
- // 例子三:將隱藏的段落用將近 4 秒的時間顯示出來,並在之後執行一個反饋。
- $("p").show(4000, function() {
- $(this).text("Animation Done...");
- });
● toggle()
- /**
- * 切換元素的可見狀態。如果元素是可見的,切換爲隱藏的;如果元素是隱藏的,切換爲可見的。
- *
- * @return jQuery Object
- * @owner jQuery Object
- */
- function toggle();
- // 例子:切換所有段落的可見狀態。
- <p>Hello</p>
- <p style="display: none">Hello Again</p>
- $("p").toggle() -> <p tyle="display: none">Hello</p><p style="display: block">Hello Again</p>
● slideDown(speed, [callback])
- /**
- * 通過高度變化(向下增大)來動態地顯示所有匹配的元素,在顯示完成後可選地觸發一個回調函數。
- *
- * 這個動畫效果只調整元素的高度,可以使匹配的元素以 "滑動" 的方式顯示出來。
- *
- * @speed(String, Number) 三種預定速度之一的字符串("slow", "normal", or "fast")
- * 或表示動畫時長的毫秒數值(如:1000)
- * @callback(Function) (可選) 在動畫完成時執行的函數
- * @return jQuery Object
- * @owner jQuery Object
- */
- function slideDown(speed, [callback]);
- // 例子一:用 600 毫秒緩慢的將段落滑下。
- $("p").slideDown("slow");
- // 例子二:用 200 毫秒快速將段落滑下,之後彈出一個對話框。
- $("p").slideDown("fast", function(){
- alert("Animation Done.");
- });
● slideToggle(speed, [callback])
- /**
- * 通過高度變化來切換所有匹配元素的可見性,並在切換完成後可選地觸發一個回調函數。
- *
- * 這個動畫效果只調整元素的高度,可以使匹配的元素以 "滑動" 的方式隱藏或顯示。
- *
- * @speed(String, Number) 三種預定速度之一的字符串("slow", "normal", or "fast")
- * 或表示動畫時長的毫秒數值(如:1000)
- * @callback(Function) (可選) 在動畫完成時執行的函數
- * @return jQuery Object
- * @owner jQuery Object
- */
- function slideToggle(speed, [callback]);
- // 例子一:用 600 毫秒緩慢的將段落滑上或滑下。
- $("p").slideToggle("slow");
- // 例子二:用 200 毫秒快速將段落滑上或滑下,之後彈出一個對話框。
- $("p").slideToggle("fast", function() {
- alert("Animation Done.");
- });
● slideUp(speed, [callback])
- /**
- * 通過高度變化(向上減小)來動態地隱藏所有匹配的元素,在隱藏完成後可選地觸發一個回調函數。
- *
- * 這個動畫效果只調整元素的高度,可以使匹配的元素以 "滑動" 的方式隱藏起來。
- *
- * @speed(String, Number) 三種預定速度之一的字符串("slow", "normal", or "fast")
- * 或表示動畫時長的毫秒數值(如:1000)
- * @callback(Function) (可選) 在動畫完成時執行的函數
- * @return jQuery Object
- * @owner jQuery Object
- */
- function slideUp(speed, [callback]);
- // 例子一:用 600 毫秒緩慢的將段落滑上。
- $("p").slideUp("slow");
- // 例子二:用 200 毫秒快速將段落滑上,之後彈出一個對話框。
- $("p").slideUp("fast", function() {
- alert("Animation Done.");
- });
● fadeIn(speed, [callback])
- /**
- * 通過不透明度的變化來實現所有匹配元素的淡入效果,並在動畫完成後可選地觸發一個回調函數。
- *
- * 這個動畫只調整元素的不透明度,也就是說所有匹配的元素的高度和寬度不會發生變化。
- *
- * @speed(String, Number) 三種預定速度之一的字符串("slow", "normal", or "fast")
- * 或表示動畫時長的毫秒數值(如:1000)
- * @callback(Function) (可選) 在動畫完成時執行的函數
- * @return jQuery Object
- * @owner jQuery Object
- */
- function fadeIn(speed, [callback]);
- // 例子一:用 600 毫秒緩慢的將段落淡入。
- $("p").fadeIn("slow");
- // 例子二:用 200 毫秒快速將段落淡入,之後彈出一個對話框。
- $("p").fadeIn("fast", function() {
- alert("Animation Done.");
- });
● fadeOut(speed, [callback])
- /**
- * 通過不透明度的變化來實現所有匹配元素的淡出效果,並在動畫完成後可選地觸發一個回調函數。
- *
- * 這個動畫只調整元素的不透明度,也就是說所有匹配的元素的高度和寬度不會發生變化。
- *
- * @speed(String, Number) 三種預定速度之一的字符串("slow", "normal", or "fast")
- * 或表示動畫時長的毫秒數值(如:1000)
- * @callback(Function) (可選) 在動畫完成時執行的函數
- * @return jQuery Object
- * @owner jQuery Object
- */
- function fadeOut(speed, [callback]);
- // 例子一:用 600 毫秒緩慢的將段落淡出。
- $("p").fadeOut("slow");
- // 例子二:用 200 毫秒快速將段落淡出,之後彈出一個對話框。
- $("p").fadeOut("fast", function() {
- alert("Animation Done.");
- });
● fadeTo(speed, opacity, [callback])
- /**
- * 把所有匹配元素的不透明度以漸進方式調整到指定的不透明度,並在動畫完成後可選地觸發一個回調函數。
- *
- * 這個動畫只調整元素的不透明度,也就是說所有匹配的元素的高度和寬度不會發生變化。
- *
- * @speed(String, Number) 三種預定速度之一的字符串("slow", "normal", or "fast")
- * 或表示動畫時長的毫秒數值(如:1000)
- * @opacity(Number) 要調整到的不透明度值(0到1之間的數字)
- * @callback(Function) (可選) 在動畫完成時執行的函數
- * @return jQuery Object
- * @owner jQuery Object
- */
- function fadeTo(speed, opacity, [callback]);
- // 例子一:用 600 毫秒緩慢的將段落的透明度調整到 0.66,大約 2/3 的可見度。
- $("p").fadeTo("slow", 0.66);
- // 例子二:用 200 毫秒快速將段落的透明度調整到 0.25,大約 1/4 的可見度,之後彈出一個對話框。
- $("p").fadeTo("fast", 0.25, function() {
- alert("Animation Done.");
- });
● animate(params, options)
- /**
- * 用於創建自定義動畫的函數。
- *
- * 這個函數的關鍵在於指定動畫形式及結果樣式屬性對象。這個對象中每個屬性都表示一個可以變化的樣式
- * 屬性(如 "height", "top" 或 "opacity")。注意:所有指定的屬性必須用駱駝形式,比如用 marginLeft
- * 代替 margin-left。而每個屬性的值表示這個樣式屬性到多少時動畫結束。如果是一個數值,樣式屬性就
- * 會從當前的值漸變到指定的值。如果使用的是 "hide", "show" 或 "toggle" 這樣的字符串值,則會爲該
- * 屬性調用默認的動畫形式。
- *
- * 在 jQuery 1.2 中,你可以使用 em 和 % 單位。另外,在 jQuery 1.2 中,你可以通過在屬性值前面指定
- * "+=" 或 "-=" 來讓元素做相對運動。
- *
- * @params(Options) 一組包含作爲動畫屬性和終值的樣式屬性和及其值的集合
- * @options(Options) 一組包含動畫選項的值的集合
- * 1. duration(String, Number) (默認值: "normal") 三種預定速度之一的字符串("slow",
- * "normal", or "fast")或表示動畫時長的毫秒數值(如:1000)
- * 2. easing(String) (默認值: "swing") 要使用的擦除效果的名稱(需要插件支持)。默認 jQuery
- * 提供 "linear" 和 "swing"
- * 3. complete(Function) 在動畫完成時執行的函數
- * 4. step(Callback)
- * 5. queue(Boolean) (默認值: true) 設定爲 false 將使此動畫不進入動畫隊列(jQuery 1.2中新增)
- * @return jQuery Object
- * @owner jQuery Object
- */
- function animate(params, options);
- // 例子一:第一個按鈕按了之後展示了不在隊列中的動畫。在 div 擴展到 90% 的同時也在增加字體,一旦字體
- // 改變完畢後,邊框的動畫纔開始。第二個按鈕按了之後就是一個傳統的鏈式動畫,即等前一個動畫完
- // 成後,後一個動畫纔會開始。
- <button id="go1">? Animate Block1</button>
- <button id="go2">? Animate Block2</button>
- <div id="block1">Block1</div><div id="block2">Block2</div>
- $("#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);
- });
- // 例子二:用 600 毫秒切換段落的高度和透明度。
- $("p").animate({
- height: 'toggle', opacity: 'toggle'
- }, { duration: "slow" });
- // 例子三:用 500 毫秒將段落移到 left 爲 50 的地方並且完全清晰顯示出來(透明度爲1)。
- $("p").animate({
- left: 50, opacity: 'show'
- }, { duration: 500 });
- // 例子四:一個使用 "easein" 函數提供不同動畫樣式的例子。只有使用了插件來提供這個" easein" 函數,
- // 這個參數才起作用。
- $("p").animate({
- opacity: 'show'
- }, { duration: "slow", easing: "easein" });
● animate(params [, duration[, easing[, callback]]])
- /**
- * 描述同 animate(params, options)
- *
- * @params(Options) 一組包含作爲動畫屬性和終值的樣式屬性和及其值的集合
- * @duration(String, Number) (可選) 三種預定速度之一的字符串("slow", "normal", or
- * "fast")或表示動畫時長的毫秒數值(如:1000)
- * @easing(String) (可選) 要使用的擦除效果的名稱(需要插件支持)。默認jQuery提供"linear"和"swing"
- * @callback(Function) (可選) 在動畫完成時執行的函數
- * @return jQuery Object
- * @owner jQuery Object
- */
- function animate(params [, duration[, easing[, callback]]]);
- // 例子一:點擊按鈕後 div 元素的幾個不同屬性一同變化。
- <button id="go"> Run</button>
- <div id="block">Hello!</div>
- // 在一個動畫中同時應用三種類型的效果
- $("#go").click(function(){
- $("#block").animate({
- width: "90%",
- height: "100%",
- fontSize: "10em",
- borderWidth: 10
- }, 1000 );
- });
- // 例子二:讓指定元素左右移動。
- <button id="left">?</button> <button id="right">?</button>
- <div class="block"></div>
- $("#right").click(function(){
- $(".block").animate({left: '+50px'}, "slow");
- });
- $("#left").click(function(){
- $(".block").animate({left: '-50px'}, "slow");
- });
- // 例子三:在 600 毫秒內切換段落的高度和透明度。
- $("p").animate({
- height: 'toggle', opacity: 'toggle'
- }, "slow");
- // 例子四:用 500 毫秒將段落移到 left 爲 50 的地方並且完全清晰顯示出來(透明度爲1)。
- $("p").animate({
- left: 50, opacity: 'show'
- }, 500);
- // 例子五:一個使用 "easein" 函數提供不同動畫樣式的例子。只有使用了插件來提供這個 "easein" 函數,
- // 這個參數才起作用。
- $("p").animate({
- opacity: 'show'
- }, "slow", "easein");
● dequeue()
- /**
- * 從動畫隊列中移除一個隊列函數。
- *
- * @return jQuery Object
- * @owner jQuery Object
- */
- function dequeue();
- // 例子:
- <style>
- div { margin:3px; width:50px; position:absolute;
- height:50px; left:10px; top:30px;
- background-color:yellow; }
- div.red { background-color:red; }
- </style>
- <button>Start</button>
- <div></div>
- $("button").click(function() {
- $("div").animate({left:'+=200px'}, 2000);
- $("div").animate({top:'0px'}, 600);
- $("div").queue(function () {
- $(this).toggleClass("red");
- $(this).dequeue();
- });
- $("div").animate({left:'10px', top:'30px'}, 700);
- });
● queue()
- /**
- * 返回指向第一個匹配元素的隊列(將是一個函數數組)。
- *
- * @return Array<Function>
- * @owner jQuery Object
- */
- function queue();
- // 例子:顯示隊列長度。
- <style>
- div { margin:3px; width:40px; height:40px;
- position:absolute; left:0px; top:30px;
- background:green; display:none; }
- div.newcolor { background:blue; }
- span { color:red; }
- </style>
- <button id="show">Show Length of Queue</button>
- <span></span>
- <div></div>
- $("#show").click(function () {
- var n = $("div").queue("fx");
- $("span").text("Queue length is: " + n.length);
- });
- function runIt() {
- $("div").show("slow");
- $("div").animate({left:'+=200'},2000);
- $("div").slideToggle(1000);
- $("div").slideToggle("fast");
- $("div").animate({left:'-=200'},1500);
- $("div").hide("slow");
- $("div").show(1200);
- $("div").slideUp("normal", runIt);
- }
- runIt();
● queue(callback)
- /**
- * 在匹配的元素的動畫隊列中添加一個函數。
- *
- * @callback(Function) 要添加進隊列的函數
- * @return jQuery Object
- * @owner jQuery Object
- */
- function queue(callback);
- // 例子:插入一個自定義函數,如果函數執行後要繼續隊列,則執行 jQuery(this).dequeue();。
- <style>
- div { margin:3px; width:40px; height:40px;
- position:absolute; left:0px; top:30px;
- background:green; display:none; }
- div.newcolor { background:blue; }
- </style>
- Click here...
- <div></div>
- $(document.body).click(function() {
- $("div").show("slow");
- $("div").animate({left:'+=200'},2000);
- $("div").queue(function () {
- $(this).addClass("newcolor");
- $(this).dequeue();
- });
- $("div").animate({left:'-=200'},500);
- $("div").queue(function () {
- $(this).removeClass("newcolor");
- $(this).dequeue();
- });
- $("div").slideUp();
- });
● queue(queue)
- /**
- * 將匹配元素的動畫隊列用新的一個隊列來代替(函數數組)。
- *
- * @queue(Array<Function>) 用於替換的隊列。所有函數都有同一個參數,這個值與 queue(callback) 相同
- * @return queue
- * @owner jQuery Object
- */
- function queue(queue);
- // 例子:通過設定隊列數組來刪除動畫隊列。
- <style>
- div { margin:3px; width:40px; height:40px;
- position:absolute; left:0px; top:30px;
- background:green; display:none; }
- div.newcolor { background:blue; }
- </style>
- <button id="start">Start</button>
- <button id="stop">Stop</button>
- <div></div>
- $("#start").click(function () {
- $("div").show("slow");
- $("div").animate({left:'+=200'},5000);
- $("div").queue(function () {
- $(this).addClass("newcolor");
- $(this).dequeue();
- });
- $("div").animate({left:'-=200'},1500);
- $("div").queue(function () {
- $(this).removeClass("newcolor");
- $(this).dequeue();
- });
- $("div").slideUp();
- });
- $("#stop").click(function () {
- $("div").queue("fx", []);
- $("div").stop();
- });
● stop()
- /**
- * 停止所有在指定元素上正在運行的動畫。如果隊列中有等待執行的動畫,他們將被馬上執行。
- *
- * @queue(Array<Function>) 用於替換的隊列。所有函數都有同一個參數,這個值與 queue(callback) 相同
- * @return jQuery Object
- * @owner jQuery Object
- */
- function stop();
- // 例子:點擊 Go 之後開始動畫,點 Stop 之後會在當前位置停下來。
- <button id="go">Go</button> <button
- id="stop">STOP!</button>
- <div class="block"></div>
- <button id="go">Go</button> <button
- id="stop">STOP!</button>
- <div class="block"></div>
- // 開始動畫
- $("#go").click(function() {
- $(".block").animate({left: '+200px'}, 5000);
- });
- // 當點擊按鈕後停止動畫
- $("#stop").click(function(){
- $(".block").stop();
- });