动画队列
队列的作用就是让我们把一个又一个的任务放到一起，确保只有当前面的任务完成了，才会开始下一个任务。这里面的任务可以是同步的，也可以是异步的。
jQuery的动画系统就是执行一个函数队列。对jQuery元素应用fade,slide,animate等动画，都会默认将函数压入一个fx的队列。在我们使用jQuery的animate()的时候，我们可以在option参数中传入一个queue的标志位来决定这个动画时候压入当前元素的动画队列。如果为false,则不等待当前队列完成，而是立即执行该动画。
方法
jQuery提供了以下几种方法来操作动画队列:
queue( [ queueName ], callback( next ) )
queue()方法用来显示在匹配的元素上的已经执行的函数队列
- queueName：一个含有队列名的字符串。默认是fx，标准的动画队列
- callback(next)：添加到队列的新函数
dequeue([queueName])
dequeue()方法用来执行匹配元素队列的下一个函数
-
queueName：一个含有队列名的字符串。默认是fx，标准的动画队列
clearQueue([queueName])
clearQueue()方法用于清除动画队列中未执行的动画，并不影响当前动画效果（即正在进行的动画不受影响），当重新执行时，动画队列重新开始，但已经执行过的队列，不会再显示效果
-
queueName：一个含有队列名的字符串。默认是fx，标准的动画队列
finish()
停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态。
stop([clearQueue ][, jumpToEnd ])
停止当前正在运行的动画
- 参数为空：停止当前动画，执行动画队列中的下一个动画
- [clearQueue ]：boolean类型，停止当前正在进行的动画，清空未执行的动画队列，影响动画效果
- [, jumpToEnd ]：boolean类型，停止当前正在进行的动画，清空未执行的动画队列，并直接跳到本次动画的结束
示例
下面直接看代码：
<!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('动画执行完毕')
$('#wrap1').text('动画执行完毕')
})
})
})
})
})
})
})
$('#action2').on('click', function () {
var $box = $('.box')
//使用jQuery动画队列写法
$box.hide(1000)
.show(1000)
.fadeOut('slow')
.fadeIn('slow')
.slideUp()
.slideDown(function () {
console.log('真的执行完毕了')
$('#wrap2').text('真的执行完毕了') //最后执行同步回调
})
console.log('动画完毕了吗？') //动画才刚开始，在动画队列创建的时候，就输出这句话，异步
$('#wrap2').text('动画完毕了吗？')
})
</script>
</body>
</html>
效果预览demo：动画队列demo
网友评论