jQuery 動畫隊列
動畫隊列的方法：
我們知道jQuery提供了以下幾種方法來操作動畫隊列：
-
stop([clearQuery],[gotoEnd]):停止當前jQuery對象里每個DOM元素上正在執(zhí)行的動畫。 -
queue([queueName,]callback):將callback動畫數(shù)添加到當前jQuery對象里所有DOM元素的動畫函數(shù)隊列的尾部。 -
queue([queueName,]naeQueue):用newQueue動畫函數(shù)隊列代替當前jQuery對象里所的DOM元素的動畫函數(shù)隊列。 -
dequeue():執(zhí)行動畫函數(shù)隊列頭的第一個動畫函數(shù)，并將該動畫函數(shù)移出隊列。 -
clearQueue([queueName]):清空動畫函數(shù)隊列中的所有動畫函數(shù)。
例子：
<!DOCTYPE html>
<html>
<head>
<script src="http://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)//設置循環(huán)更新動畫隊列的進展
}
$('.box').on('click',runIt)//當點擊box的時候，開始啟動動畫
</script>
</body>
</html>
執(zhí)行效果：
演示效果
