jQuery Effects - 動畫
使用 jQuery，您可以建立自定義動畫。
jQuery 動畫 - animate() 方法
jQuery 的 animate() 方法用於建立自定義動畫。
語法
$(selector).animate({params},speed,callback);
必需的 params 引數定義了要進行動畫處理的 CSS 屬性。
可選的 speed 引數指定了效果的持續時間。它可以接受以下值：“slow”（慢）、“fast”（快）或毫秒。
可選的 callback 引數是一個在動畫完成時執行的函式。
以下示例演示了 animate() 方法的簡單用法；它將一個 <div> 元素向右移動，直到其 left 屬性達到 250px。
預設情況下，所有 HTML 元素的位置屬性都是 static，無法移動。
要操作位置，請記住先將元素的 CSS position 屬性設定為 relative、fixed 或 absolute！
jQuery animate() - 操作多個屬性
請注意，可以同時為多個屬性新增動畫。
示例
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
自己動手試一試 »
是否可以使用 animate() 方法操作所有 CSS 屬性？
是的，幾乎可以！但是，有一件重要的事情要記住：所有屬性名在使用 animate() 方法時都必須是駝峰式命名：您需要寫 paddingLeft 而不是 padding-left， marginRight 而不是 margin-right，依此類推。
此外，顏色動畫不包含在核心 jQuery 庫中。
如果您想為顏色新增動畫，需要從 jQuery.com 下載 Color Animations 外掛。
jQuery animate() - 使用相對值
也可以定義相對值（該值相對於元素的當前值）。這是透過在值前面加上 += 或 -= 來實現的。
示例
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
自己動手試一試 »
jQuery animate() - 使用預定義值
您甚至可以將屬性的動畫值指定為“show”（顯示）、“hide”（隱藏）或“toggle”（切換）。
jQuery animate() - 使用佇列功能
預設情況下，jQuery 為動畫提供了佇列功能。
這意味著，如果您連續編寫多個 animate() 呼叫，jQuery 會建立一個“內部”佇列來儲存這些方法呼叫。然後它將按順序一一執行這些 animate 呼叫。
因此，如果您想依次執行不同的動畫，可以利用佇列功能。
示例 1
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
自己動手試一試 »
下面的示例首先將 <div> 元素向右移動，然後增加文字的字型大小。
示例 2
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
自己動手試一試 »
jQuery 練習
jQuery Effects 參考
有關所有 jQuery 效果的完整概述，請訪問我們的 jQuery Effect Reference。
