jQuery动画队列
2019-03-10 本文已影响0人
东郭皮蛋
我们知道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>
