在jQuery中，如果我們想要對動畫進行延遲操作，可以用delay()方法來實現。
語法：
$().delay(speed)
說明：
參數speed，表示動畫的速度，單位為毫秒。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#lvye
{
display:inline-block; /*將塊元素轉換為行內塊元素*/
width:50px;
height:50px;
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": "200px" }, 1000).delay(1000).animate({ "height": "200px" }, 1000);
});
})
</script>
</head>
<body>
<div id="lvye"></div>
</body>
</html>
默認情況下，在浏覽器預覽效果如下：
當我們點擊div元素後，在浏覽器預覽效果如下：
分析：
這裡使用2個animate()方法定義了一個隊列動畫，這個隊列動畫共有2段動畫。然後在第1段動畫之後使用了delay()方法來延遲2秒（2000毫秒），然後再執行第2段動畫。