怎么理解JQuery中的动画队列

2019-06-28 本文已影响0人 fanlelee

队列

队列是一种具有 ‘先进先出’特性的线性表，即在前端删除（出），在尾端添加（入）。
在数组中常用到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) //停止当前正在执行的动画，清除队列，当前正在执行的动画跳到最终状态