在了解隊列動畫之前，我們先看一段代碼：
$("#lvye").click(function(){
$(this).animate({"width":"100px",height:"100px"});
})
上面例子實現的動畫效果是：元素的寬度和高度同時改變。也就是說，兩個動畫效果（width:"100px"和height:"100px"）是同時發生的。如果我們想要實現“先”改變寬度，“後”改變高度的話，使用之前我們所學的方法就無法實現了。這個時候我們就必須借助jQuery“隊列動畫”。
在jQuery中，隊列動畫指的是在元素中按照一定的順序執行多個動畫效果，即有多個animate()方法在元素中執行，然後根據這些animate()方法執行的先後順序，形成了動畫隊列，然後按照這個動畫隊列的順序來進行顯示。這個跟我們在飯堂排隊打飯是一樣的道理……
語法：
$().animate().animte()…….animte()
說明：
隊列動畫，就是按照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"},1000).animate({"height":"100px"},1000);
})
})
</script>
</head>
<body>
<div id="lvye"></div>
</body>
</html>
默認情況下，在浏覽器預覽效果如下：
當我們點擊div元素後，在浏覽器預覽效果如下：
分析：
這裡使用隊列動畫的形式，按照animate()方法調用的先後順序來實現。也就是說只有animate({"width":"100px"},1000)執行完成之後，才會接著執行animate({"height":"100px"},1000)。
舉例：固定欄目
在線測試
<!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" }, 1000).animate({ "background-color": "red" }, 1000).fadeOut(500);
})
})
</script>
</head>
<body>
<div id="lvye"></div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
這個例子實現了一個復雜的隊列動畫效果：第1個動畫改變元素的高度和寬度，第2個動畫改變元素的背景顏色，第3個動畫使用fadeOut()實現元素的淡出效果。這3個動畫按照順序依次執行。
細心的同學可能會發現，隊列動畫不是按照animate()的先後順序執行嗎？為什麼fadeOut()也能加入隊列動畫呢？這是因為fadeOut()也屬於動畫的一種，本質上也是使用animate()來實現的。也就是說，隊列動畫包括之前我們所學到的4種動畫形式：（1）顯示和隱藏；（2）淡入和淡出；（3）滑上和滑下；（4）自定義動畫。