队列实现是jQuery非常棒的一个拓展，使用动画队列可以使动画更容易实现。
.animate( properties [, duration ] [, easing ] [, complete ] )
官方文档
properties是一个CSS属性和值的对象,动画将根据这组对象移动。
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
});
示例:
<div class="button">
<button id="animate">animate</button>
</div>
<div class="box">
<p>这是box里的内容</p>
</div>
<script>
$("#animate").on("click",function(){
$(".box").animate({
width: "500px"
},5000);
console.log("这是点击时出现的文字");
});
</script>
为了效果更明显，动画的时间设置为5s，可以看出控制台输出的文字在点击按钮是立即触发，这说明了一个事情，即动画方法animate不是同步的，而是异步的，这就引申出了动画队列。
动画的执行不是同步的，而是加入到动画队列中，这样就可以实现多个动画效果连在一起，构成一个连续的动画。
queue()
queue()方法用来显示在匹配的元素上的已经执行的函数队列
queue([queueName])
queue()方法可以接受一个可选参数——一个含有队列名的字符串。该参数默认是'fx'
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">开始动画</button>
<button id="reset">恢复</button>
<span id="result"></span>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
history.go();
})
$('#btn').click(function(event){
setInterval(function(){
$('#result').html('队列数是:' +$('#box').queue().length)
},100)
$('#box').animate({'left':'100px'},1000)
.animate({'width':'200px'},1000)
.animate({'left':'0'},1000)
.animate({'width':'100px'},1000);
});
</script>
效果:
image
queue(callback(next))
queue()方法可以接受一个回调函数作为参数，表示将要添加到队列中的新函数
[注意]queue()方法的回调函数中，可以进行样式变换等，但不可以增加动画效果
由下面代码执行结果可以看出，队列执行完函数后，队列后面的动画效果被停止，这时就需要用到下面要介绍的dequeue()方法
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">开始动画</button>
<button id="reset">恢复</button>
<span id="result"></span>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
history.go();
})
$('#btn').click(function(event){
setInterval(function(){
$('#result').html('队列数是:' +$('#box').queue().length)
},100)
$('#box').animate({'left':'100px'},1000)
.animate({'width':'200px'},1000);
$('#box').queue(function(){
$('#box').css('background','lightgreen');
})
$('#box').animate({'left':'0'},1000)
.animate({'width':'100px'},1000);
});
</script>
效果:
image
dequeue()
dequeue()方法用来执行匹配元素队列的下一个函数
dequeue([queueName])
dequeue()方法可以接受一个可选参数——一个含有队列名的字符串，默认是fx
[注意]dequeue()方法本身也算队列的一员
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">开始动画</button>
<button id="reset">恢复</button>
<span id="result"></span>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
history.go();
})
$('#btn').click(function(event){
setInterval(function(){
$('#result').html('队列数是:' +$('#box').queue().length)
},100)
$('#box').animate({'left':'100px'},1000)
.animate({'width':'200px'},1000);
$('#box').queue(function(){
$(this).css('background','lightgreen');
$(this).dequeue();
})
$('#box').animate({'left':'0'},1000)
.animate({'width':'100px'},1000);
});
</script>
效果:
image
clearQueue()
与deQueue()方法相反，clearQueue()方法用来从列队中移除所有未执行的项
[注意]clearQueue() 清除动画队列中未执行的动画
clearQueue([queueName])
clearQueue()方法可以接受一个可选参数——一个含有队列名的字符串，默认是fx
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">开始动画</button>
<button id="btn1">清除动画</button>
<button id="reset">恢复</button>
<span id="result"></span>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
history.go();
})
$('#btn').click(function(event){
setInterval(function(){
$('#result').html('队列数是:' +$('#box').queue().length)
},100)
$('#box').animate({'left':'100px'},1000)
.animate({'width':'200px'},1000);
$('#box').queue(function(){
$(this).css('background','lightgreen');
$(this).dequeue();
})
$('#box').animate({'left':'0'},1000)
.animate({'width':'100px'},1000);
});
$('#btn1').click(function(event){
$('#box').clearQueue();
})
</script>
效果:
image
finish()
停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">开始动画</button>
<button id="btn1">清除动画</button>
<button id="btn2">停止动画</button>
<button id="reset">恢复</button>
<span id="result"></span>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
history.go();
})
$('#btn').click(function(event){
setInterval(function(){
$('#result').html('队列数是:' +$('#box').queue().length)
},100)
$('#box').animate({'left':'100px'},1000)
.animate({'width':'200px'},1000);
$('#box').queue(function(){
$(this).css('background','lightgreen');
$(this).dequeue();
})
$('#box').animate({'left':'0'},1000)
.animate({'width':'100px'},1000);
});
$('#btn1').click(function(event){
$('#box').clearQueue();
})
$('#btn2').click(function(event){
$('#box').finish();
})
</script>
效果:
image
stop()
停止当前正在运行的动画
.stop( [clearQueue ] [, jumpToEnd ] )
参数为空：停止当前动画，执行动画队列中的下一个动画
- [clearQueue ]：boolean类型，停止当前正在进行的动画，清空未执行的动画队列，影响动画效果
- [, jumpToEnd ]：boolean类型，停止当前正在进行的动画，清空未执行的动画队列，并直接跳到本次动画的结束
网友评论