队列
- 队列是一种具有 ‘先进先出’特性的线性表，即在前端删除（出），在尾端添加（入）。
- 在数组中常用到push给数组尾端添加元素，shift在数组前端删除元素，可以将此看做是一种队列。
- 理解了数组中的队列，那么在JQuery的动画队列中，.queue()对应数组的push，.dequeue()对应数组的shift。
JQuery的自定义动画
.animate()
animite可以移动元素或者动态改变宽高
例1:
$('.box').animate({
left:'300px' //移动位置
}, 1000, function(){
console.log('animate了')
})
.animate({
left: '300px',
top: '300px'
}, 1000)
.animate({
left: '0',
top: '300px'
}, 1000)
.animate({
left: '0',
top: '0'
}, 1000, function(){
clearInterval(sil)
})
console.log('animate了吗？')
输出结果：animate了吗？animate了
说明元素的动画效果是异步的。
例2:
startAnimation()
function startAnimation(){
$('.box').animate({height:300},"slow")
.animate({width:300},"slow")
.css("background-color","blue")
.animate({height:100},"slow")
.animate({width:100},"slow", startAnimation())
}
以上执行结果，元素会先变成蓝色再进行移动 .css("background-color","blue")
JQuery动画队列
queue()、dequeue
每一个元素都可以有一个或多个动画效果，它们会按照顺序放入一个队列中（默认名为fx），并异步的调用动画队列。
例：
$('.box').hide()
.show()
以上，它的执行顺序是先hide()然后show()，JQuery默认将它们放入fx队列中，可以这样认为：
var fx = [hide, show]
$('.box').queue('fx', fx)//形成一个队列
$('.box').dequeue('fx') //进入第一个元素hide并执行掉（出）
$('.box').dequeue('fx') //进入第二个元素show并执行掉（出）
fx：[] //最后队列fx为空
再来两个范例帮助理解：
(1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
position: relative;
}
.box {
position:absolute;
width:100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
var sil = setInterval(function(){
console.log($('.box').queue().length)
}, 1000)
$('.box')
.animate({
left:'300px'
}, 1000,)
.animate({
left: '300px',
top: '300px'
}, 1000)
.animate({
left: '0',
top: '300px'
}, 1000)
.animate({
left: '0',
top: '0'
}, 1000, function(){
clearInterval(sil)
})
//结果：每隔一秒输出 4 3 2 1
</script>
</body>
</html>
(2)
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
<script>
$( "#start" ).click(function() {
$( "div" )
.show( "slow" )
.animate({ left: "+=200" }, 5000 )
.queue(function() {
$( this ).addClass( "newcolor" ).dequeue();
})
.animate({ left: '-=200' }, 1500 )
.queue(function() {
$( this ).removeClass( "newcolor" ).dequeue();
})
.slideUp();
});
$( "#stop" ).click(function() {
$( "div" )
.queue( "fx", [] ) //队列全部清除了
.stop();
});
//结果：在元素移动过程中点击stop直接停止在当前的状态效果
</script>
.clearQueue
停止动画，清除未完成的动画队列，展示当前正在执行这一帧的最终状态
$('.box').clearQueue()
.finish
停止动画，清除未完成的动画队列，展示动画队列里最后一帧的最终状态
$('.box').finish()
.stop( [clearQueue ] [, jumpToEnd ] )
停止动画，默认.stop(false, false)
[clearQueue ] 是否清除未完成的动画队列
[, jumpToEnd ]是否展示当前正在执行这一帧的最终状态
$('.box').stop(false,false) //停止当前正在执行的动画，不清除队列，当前正在执行的动画不跳到最终状态 （默认false,false）
$('.box').stop(true,false) //停止当前正在执行的动画，清除队列，当前正在执行的动画不跳到最终状态
$('.box').stop(false,true) //停止当前正在执行的动画，不清除队列，当前正在执行的动画跳到最终状态
$('.box').stop(true,true) //停止当前正在执行的动画，清除队列，当前正在执行的动画跳到最终状态
网友评论