動畫隊列
隊列的作用就是讓我們把一個又一個的任務放到一起，確保只有當前面的任務完成了移怯，才會開始下一個任務香璃。這里面的任務可以是同步的，也可以是異步的舟误。
jQuery的動畫系統(tǒng)就是執(zhí)行一個函數(shù)隊列葡秒。對jQuery元素應用fade,slide,animate等動畫，都會默認將函數(shù)壓入一個fx的隊列脐帝。在我們使用jQuery的animate()的時候同云，我們可以在option參數(shù)中傳入一個queue的標志位來決定這個動畫時候壓入當前元素的動畫隊列。如果為false,則不等待當前隊列完成堵腹，而是立即執(zhí)行該動畫炸站。
方法
jQuery提供了以下幾種方法來操作動畫隊列:
queue( [ queueName ], callback( next ) )
queue()方法用來顯示在匹配的元素上的已經(jīng)執(zhí)行的函數(shù)隊列
- queueName：一個含有隊列名的字符串。默認是fx疚顷，標準的動畫隊列
- callback(next)：添加到隊列的新函數(shù)
dequeue([queueName])
dequeue()方法用來執(zhí)行匹配元素隊列的下一個函數(shù)
-
queueName：一個含有隊列名的字符串旱易。默認是fx，標準的動畫隊列
clearQueue([queueName])
clearQueue()方法用于清除動畫隊列中未執(zhí)行的動畫腿堤，并不影響當前動畫效果（即正在進行的動畫不受影響）阀坏，當重新執(zhí)行時，動畫隊列重新開始笆檀，但已經(jīng)執(zhí)行過的隊列忌堂，不會再顯示效果
-
queueName：一個含有隊列名的字符串。默認是fx酗洒，標準的動畫隊列
finish()
停止當前動畫士修，并清除動畫隊列中所有未完成的動畫,最終展示動畫隊列最后一幀的最終狀態(tài)枷遂。
stop([clearQueue ][, jumpToEnd ])
停止當前正在運行的動畫
- 參數(shù)為空：停止當前動畫，執(zhí)行動畫隊列中的下一個動畫
- [clearQueue ]：boolean類型棋嘲，停止當前正在進行的動畫酒唉，清空未執(zhí)行的動畫隊列，影響動畫效果
- [, jumpToEnd ]：boolean類型沸移，停止當前正在進行的動畫痪伦，清空未執(zhí)行的動畫隊列，并直接跳到本次動畫的結束
示例
下面直接看代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動畫隊列</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style type="text/css">
.box {
background: black;
padding: 10px;
width: 150px;
height: 150px;
margin-top: 20px;
}
</style>
</head>
<body>
<button id="btn-box1">show</button>
<button id="btn-box2">hide</button>
<button id="btn-box3">fadeIn</button>
<button id="btn-box4">fadeOut</button>
<button id="btn-box5">slideDown</button>
<button id="btn-box6">slideUp</button>
<button id="action1" style="color: red;">普通嵌套寫法 地獄回調</button>
<button id="action2" style="color: green;">jQuery動畫隊列回調</button>
<div class="container">
<div class="box">
</div>
</div>
<div id="wrap1" style="color: red;"></div>
<div id="wrap2" style="color: green;"></div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript">
$('#btn-box1').on('click', function () {
$('.box').show('normal')
})
$('#btn-box2').on('click', function () {
$('.box').hide('normal')
})
$('#btn-box3').on('click', function () {
$('.box').fadeIn()
})
$('#btn-box4').on('click', function () {
$('.box').fadeOut()
})
$('#btn-box5').on('click', function () {
$('.box').slideDown()
})
$('#btn-box6').on('click', function () {
$('.box').slideUp()
})
$('#action1').on('click', function () {
var $box = $('.box')
//回調地獄寫法
$box.hide(1000, function () {
$box.show(1000, function () {
$box.fadeOut('slow', function () {
$box.fadeIn('slow', function () {
$box.slideUp(function () {
$box.slideDown(function () {
console.log('動畫執(zhí)行完畢')
$('#wrap1').text('動畫執(zhí)行完畢')
})
})
})
})
})
})
})
$('#action2').on('click', function () {
var $box = $('.box')
//使用jQuery動畫隊列寫法
$box.hide(1000)
.show(1000)
.fadeOut('slow')
.fadeIn('slow')
.slideUp()
.slideDown(function () {
console.log('真的執(zhí)行完畢了')
$('#wrap2').text('真的執(zhí)行完畢了') //最后執(zhí)行同步回調
})
console.log('動畫完畢了嗎雹锣？') //動畫才剛開始网沾，在動畫隊列創(chuàng)建的時候，就輸出這句話笆制，異步
$('#wrap2').text('動畫完畢了嗎绅这？')
})
</script>
</body>
</html>
效果預覽demo：動畫隊列demo
