動畫隊列常用方法
- queue([queueName,]callback):將callback動畫數(shù)添加到當前jQuery對象里所有DOM元素的動畫函數(shù)隊列的尾部。
- queue([queueName,]naeQueue):用newQueue動畫函數(shù)隊列代替當前jQuery對象里所的DOM元素的動畫函數(shù)隊列。
- stop([clearQuery],[gotoEnd]):停止當前正在運行的動畫
- clearQueue：是否清除未執(zhí)行的動畫隊列，default: false
- jumpToEnd：是否展示當前動畫最終狀態(tài)，default: false
- dequeue():執(zhí)行動畫函數(shù)隊列頭的第一個動畫函數(shù)，并將該動畫函數(shù)移出隊列。
- clearQueue([queueName]):清空動畫函數(shù)隊列中的所有動畫函數(shù)。
- .finish():停止當前動畫，并清除動畫隊列中所有未完成的動畫,最終展示動畫隊列最后一幀的最終狀態(tài)
舉例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<title>JS Bin</title>
<style>
#box {
position:relative;
height: 100px;
width: 100px;
background-color: yellow;
}
</style>
</head>
<button id="btn">開始動畫</button>
<button id="btn1">clearQueue</button>
<button id="btn2">finish</button>
<button id="btn3">stop</button>
<button id="btn4">stop(true)</button>
<button id="btn5">stop(true,true)</button>
<span id="result"></span>
<div id="box"></div>
<script>
$('#btn').click(function () {
setInterval(function () {
$('#result').html('隊列數(shù)是:' + $('#box').queue().length)
}, 1000)
$('#box').animate({
'left': '100px'
}, 1000)
.animate({
'width': '200px'
}, 1000);
$('#box').queue(function () {
$(this).css('height', '200px');
$(this).dequeue();
},1000)
$('#box').animate({
'left': '0'
}, 1000)
.animate({
'width': '100px',
'height':'100px'
}, 1000);
});
$('#btn1').click(function () {
$('#box').clearQueue();
})
$('#btn2').click(function () {
$('#box').finish();
})
$('#btn3').click(function () {
$('#box').stop()
})
$('#btn4').click(function () {
$('#box').stop(true)
})
$('#btn5').click(function () {
$('#box').stop(true, true)
})
</script>
</body>
</html>
實現(xiàn)效果：
