第一部分: 定义和操作函数介绍
什么是动画队列
在JQuery中, 一个系列连串的动画是由多个动画连续执行的.
每个动画都调用一次.animate(),他们依照先后顺序执行,
这些连续的动画被默认放在.queue()中.
动画队列api: queue()
对queue有如下操作:
- .clearQueue() :清除动画队列未执行的动画
- .finish() : 停止当前动画,并清除动画队列未执行的动画, 直接调转到动画最后一帧.
- .stop([clearQueue] [,jumpToEnd]): 停止当前正在运行的动画,
- clearQueue(default: false)
- jumpToEnd(default: false)
书写动画队列的两种方式:
一: 动画函数嵌套方式
var $box = $('.classname')
$box.hide(1000,function(){
$box.show(1000,function(){
$box.fadeOut(1000,function(){
$box.fadeIn(1000,function(){
$box.slideUp(1000,function(){
$box.slideDown(1000,function(){
console.log("动画队列完毕")
})
})
})
})
})
})
二: 自定义动画队列:
$('.className').animate({left: 50},1000)
.animate({width: 150},1000)
.animate({width: 180},1000)
.animate({width: 200},1000)
.animate({height: 110},1000)
.animate({height: 100,},1000)
.animate({width: 100,left: 0},1000)
})
第二部分: 实例演示
案例说明:
点击paly按钮-->开始动画; 点击reset,重置复原. 文本框显示动画队列执行的剩余次数
html
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<input type="button" value="play" id="play">
<input type="button" value="reset" id="reset">
<span class="animate-time"></span>
<div class="wrap" style="position: relative">
<div class="box" style="width:100px; height:100px; background:red; position:ab2solute"></div>
</div>
</body>
</html>
JavaScript
$('#play').click(function(){
// 输出动画队列次序
setInterval(function(){
$('.animate-time').html( "队列次序:" + $('.wrap .box').queue().length )
},100)
//动画队列
$('.wrap .box').animate({left: 50},1000)
.animate({width: 150},1000)
.animate({width: 180},1000)
.animate({width: 200},1000)
.animate({height: 110},1000)
.animate({height: 100,},1000)
.animate({width: 100,left: 0},1000)
})
// 动画队列重置
$('#reset').click(function(){
$('.wrap .box').finish()
})
最终效果:
animateQueue.gif
