在前幾節，我們接觸了以下3種動畫：
但是我們在浏覽網頁中經常還看到其他動畫形式，例如層不斷移動、層不斷擴大等。這些各種各樣的動畫，如果單純地用上面這3種動畫形式就無法實現了。
由於這3種動畫的形式是固定的，很多情況下無法滿足開發者對動畫設計的各種需求。在jQuery中，還提供了一種“自定義動畫”來幫助我們設計各種各樣的動畫。
在jQuery中，對於自定義動畫，我們可以使用animate()方法來實現。
jQuery動畫其實就是通過將元素的某一個屬性從“一個屬性值”在指定時間內平滑地過渡到“另外一個屬性值”來實現動畫效果（大家仔細理解這句話，就能很深刻地理解jQuery動畫的本質，非常重要）。jQuery動畫原理跟CSS3動畫原理是一樣的。對於CSS3動畫，可以關注我們的CSS3教程。
語法：
$().animate(params , speed , callback)
說明：
params，必選參數，表示“屬性:值”列表，也就是元素在動畫中變化的屬性列表（具體形式，參考下面幾個例子）；
speed，可選參數，表示動畫的速度，單位為毫秒，默認值為200毫秒。如果參數省略，則采用默認速度；
callback，可選參數，表示動畫完成之後執行的函數（即回調函數）。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#lvye
{
display:inline-block; /*將塊元素轉換為行內塊元素*/
width:30px;
height:30px;
border:1px solid orange;
background-color:#FFE7B7;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#lvye").click(function () {
$(this).animate({ "width": "100px","height":"100px"}, 1000);
})
})
</script>
</head>
<body>
<div id="lvye"></div>
</body>
</html>
默認情況下，在浏覽器預覽效果如下：
當我們點擊div元素後，在浏覽器預覽效果如下：
分析：
從例子可以看出，animate()方法的params參數是以鍵值對的形式存在，語法如下：
{"屬性1":"屬性值1","屬性2":"屬性值2",……, "屬性n":"屬性值n"}
這種鍵值對的形式非常的簡單，也非常有用，在我們以後編程生涯中也會大量接觸到，例如JSON對象、JavaScript對象、Session、cookie等地方都會涉及，建議大家要認真體會一下這種數據格式。
在上面例子的基礎上，如果我們還想同時將背景顏色改變為紅色，很自然我們寫下了如下jQuery代碼：
$("#lvye").click(function () {
$(this).animate({ "width": "100px","height":"100px","background-color":"red"}, 1000);
})
納尼？當我們測試的時候，居然背景顏色沒有改變？再審查一遍也沒有發現什麼錯誤啊，那究竟是什麼回事呢？其實像這種bug，新人是很難找到答案。
你沒錯，是jquery錯了！oh，shit，jquery自己都有錯？站長你逗我？
沒逗大家，jquery庫源碼本身有一個缺陷，就是在調用animate()方法的時候無法識別color、background-color和border-color這些顏色屬性。因此我們還需要引入一個jquery.color.js（本文底部提供下載）來修復這個bug。最終代碼如下：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#lvye
{
display:inline-block; /*將塊元素轉換為行內塊元素*/
width:30px;
height:30px;
border:1px solid orange;
background-color:#FFE7B7;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../App_js/jquery.color.js"></script>
<script type="text/javascript">
$(function () {
$("#lvye").click(function () {
$(this).animate({ "width": "100px", "height": "100px" ,"background-color":"red"}, 1000)
})
})
</script>
</head>
<body>
<div id="lvye"></div>
</body>
</html>
默認情況下，在浏覽器預覽效果如下：
當我們點擊div元素後，在浏覽器預覽效果如下：
分析：
使用jquery.color.js這個文件就可以完美解決animate()方法無法識別color和background-color、border-color等顏色屬性值的問題。
此外，讀者朋友們還需要注意一點：由於jquery.color.js是依賴jQuery庫而存在的，因此jquery.color.js文件必須放在jquery.1.12.0.min.js（jQuery庫文件）後面引入，不然同樣無效。
在上面的代碼中，我們設置了{"width":"100px"}作為動畫參數。如果我們在100px之前加上“+=”，這種形式則表示以元素本身的width為基點進行“累加”；如果我們在100px之前加上“-=”則表示以元素本身的width為基點進行“累減”。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#simple,#sum
{
display:inline-block; /*將塊元素轉換為行內塊元素*/
width:30px;
height:30px;
border:1px solid orange;
background-color:#FFE7B7;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../App_js/jquery.color.js"></script>
<script type="text/javascript">
$(function () {
$("#btn-simple").click(function () {
$("#simple").animate({ "width": "100px", "height": "100px" }, 1000);
})
$("#btn-sum").click(function () {
$("#sum").animate({ "width": "+=100px", "height": "+=100px" }, 1000);
})
})
</script>
</head>
<body>
<div id="simple"></div>
<input id="btn-simple" type="button" value="簡單動畫" /><br />
<div id="sum"></div>
<input id="btn-sum" type="button" value="累加動畫" />
</body>
</html>
默認情況下，在浏覽器預覽效果如下：
當我們點擊兩個按鈕之後，在浏覽器預覽效果如下：
分析：
animate({ "width": "100px", "height": "100px" }由於是簡單動畫，使得元素最終的width為100px，height為100px；
animate({ "width": "+=100px", "height": "+=100px" }由於是累加動畫，使得元素最終的width為130px，height為130px。
從上面這個例子，我們可以很直觀地看出了簡單動畫與累積動畫的不同。簡單動畫只是給定了元素屬性的最終值，而累積動畫是在元素屬性的基礎上的增加和減少。此外，如果我們多次點擊“累加動畫”按鈕之後，會發現這個動畫效果是不斷累加的，大家可以在測試工具裡面嘗試操作一下。
在了解回調函數之前，我們先來看一個例子。如果我們想要在簡單動畫那個例子中，在動畫“執行完成之後”（看清楚）再調用CSS()方法來添加一個邊框，該如何實現呢？有些同學可能就會寫下如下代碼：
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#lvye
{
display:inline-block; /*將塊元素轉換為行內塊元素*/
width:30px;
height:30px;
border:1px solid orange;
background-color:#FFE7B7;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#lvye").click(function () {
$(this).animate({ "width": "100px", "height": "100px" }, 1000).css("border", "5px solid red");
})
})
</script>
</head>
<body>
<div id="lvye"></div>
</body>
</html>
默認情況下，在浏覽器預覽效果如下：
當我們點擊div元素後，在浏覽器預覽效果如下：
分析：
我們會發現，當我們點擊的一瞬間，div元素就已經被添加了一個邊框。也就說，剛剛執行動畫的時候，css()方法就被執行了。這個跟我們預期效果完全不一樣！出現這個問題的原因是css()方法並不會加入到“動畫隊列”中，而是立即執行。
如果想要在動畫執行完成之後再實現某些操作，我們就需要用到了animate()方法中的回調函數。
舉例：固定欄目
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#lvye
{
display:inline-block; /*將塊元素轉換為行內塊元素*/
width:30px;
height:30px;
border:1px solid orange;
background-color:#FFE7B7;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#lvye").click(function () {
$(this).animate({ "width": "100px", "height": "100px" }, 1000, function () {
$(this).css("border", "5px solid red");
});
})
})
</script>
</head>
<body>
<div id="lvye"></div>
</body>
</html>
默認情況下，在浏覽器預覽效果如下：
當我們點擊div元素後，在浏覽器預覽效果如下：
分析：
使用了回調函數，我們就實現了預期的效果：動畫“執行完成之後”再調用CSS()方法來添加一個邊框。
回調函數不僅適用於animate()方法，也適用於jQuery所有的動畫效果方法。回調函數在jQuery中大量存在，在之前我們也有過接觸。所謂的回調函數說白了，就是在某個方法執行完成之後的“附加操作”。當然在jQuery動畫中，回調函數用得不多，大家不必擔心。
不過呢，回調函數這個概念極其重要，大家要認真理解好，知道是怎麼一回事。在後面的課程例如ajax等也會經常接觸。
文件下載jquery.color.js