jQuery 簡單認識動畫隊列

02-16

紙上得來終覺淺，絕知此事要躬行 ——《冬夜讀書示子聿》陸遊
動畫隊列的方法：

我們知道jQuery提供了以下幾種方法來操作動畫隊列：

- stop([clearQuery],[gotoEnd]):停止當前jQuery對象里每個DOM元素上正在執行的動畫。

- queue([queueName,]callback):將callback動畫數添加到當前jQuery對象里所有DOM元素的動畫函數隊列的尾部。

- queue([queueName,]naeQueue):用newQueue動畫函數隊列代替當前jQuery對象里所的DOM元素的動畫函數隊列。

- dequeue():執行動畫函數隊列頭的第一個動畫函數，並將該動畫函數移出隊列。

- clearQueue([queueName]):清空動畫函數隊列中的所有動畫函數。

例子：

<!DOCTYPE html><html><head><script src="//code.jquery.com/jquery-2.1.1.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title> <style> .box { top: 30px; position: absolute; width: 200px; height: 200px; background-color: #aaa;}body { position: relative;}span { margin-right: 10px;} </style></head><body> <span>動畫序列剩餘</span><span class="num">0</span><span>部分</span><div class="box">點擊灰色部分開始動畫</div> <script> function runIt(){ //啟動獲取動畫隊列進度 showIt(); //動畫第一部分 $(.box).animate({ left: +=100, width: 100 },600) //動畫第二部分 $(.box).animate({ top: +=100, height: 100 },600) //動畫第三部分 $(.box).animate({ left: -=100, width: 200 },600) //動畫第四部分 $(.box).animate({ top: -=100, height: 200 },600) //動畫第五部分 $(.box).slideUp(600) //動畫第六部分 $(.box).slideDown(600,runIt)}function showIt(){ var num = $(.box).queue().length;//獲取動畫隊列剩餘長度 $(.num).text(num); setTimeout(showIt,10)//設置循環更新動畫隊列的進展}$(.box).on(click,runIt)//當點擊box的時候，開始啟動動畫 </script></body></html>