jQuery的animate()方法可以創建自定義動畫。
jQuery的動畫-在animate()方法
jQuery的animate()方法用於創建自定義動畫。
句法：
$(selector).animate({params},speed,callback);所需PARAMS參數定義的CSS屬性進行動畫。
可選的速度參數指定的效果的持續時間。 它可以採取以下值： "slow", "fast" ，或毫秒。
可選的回調參數是在動畫完成後所要執行的功能。
下面的例子演示了一個簡單使用的animate()方法; 它移動的<div>元素的右側，直到它已達到了250像素的左屬性：
缺省情況下，所有的HTML元素有一個靜態位置，並且不能移動。
要操作的位置，記得先把元素的CSS position屬性設置為relative, fixed ，或absolute ！
jQuery的animate() -操縱多個屬性
注意，多個屬性可以在同一時間進行動畫：
例
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
試一試» 是否有可能操縱與所有的CSS屬性animate()方法？
是的，差不多！ 但是，要記住一件重要的事情：在使用時，所有屬性名必須是駱駝套管animate()方法：你需要寫paddingLeft代替padding-left, marginRight代替margin-right ，等等。
此外，彩色動畫不包含在核心jQuery庫。
如果你想動畫的顏色，你需要下載顏色動畫插件從jQuery.com。
jQuery的animate() -使用相對值
另外，也可以以限定的相對值（該值是則相對於該元素的當前值）。 這是通過把做+=或-=的值前面：
例
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
試一試» jQuery的animate() -使用預設值
你甚至可以指定屬性的動畫值作為"show", "hide"或"toggle" ：
jQuery的animate() -使用隊列功能
默認情況下，jQuery提供了動畫隊列功能。
這意味著，如果你寫多個animate()調用後對方，jQuery的創建一個“內部”隊列這些方法調用。 然後，它運行動畫調用一個接一個。
所以，如果你想後，對方以執行不同的動畫，我們利用隊列功能：
例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效果的完整概述，請訪問我們的jQuery效果參考 。