3.6.2 操作动画队列

发表于 更新于 分类于 ， ， Waline： 本文字数： 2.5k 阅读时长 ≈ 2 分钟

3.6.2 操作动画队列

当在jQuery对象上调用动画方法时,如果该对象正在执行某个动画效果,那么新调用的动画方法就会被添加到动画队列中,jQuery会按顺序依次执行动画队列中的每个动画。

jQuery对象提供的操作动画队列的方法

jQuery对象提供了以下几种方法来操作动画队列。

stop方法

方法 描述
stop([clearQueue],[gotoEnd]) 停止当前jQuery对象里每个DOM元素上正在执行的动画。

如果该jQuery对象上绑定了动画队列,且clearQueue没有指定为true,则执行该方法后将立即执行当前动画的下一个动画,
可以对该函数的clearQueue、gotoEnd两个可选的布尔类型的参数进行指定,

  • 其中clearQueue指定是否删除该jQuery对象上的动画队列;
  • 如果将gotoEnd 设置为true,则当前动画立即跳到最后一帧而结束,否则当前动画将停在当前帧而结束。

queue方法

queue有如下几种形式:

方法 描述
queue([queueName]) 返回当前jQuery对象里第一个DOM元素上的动画函数队列。
queue([queueName,] callback) 将callback动画函数添加到当前jQuery对象里所有DOM元素的动画函数队列的尾部。
queue([queueName,] newQueue) 用newQueue动画函数队列代替当前jQuery对象里所有DOM元素的动画函数队列。

queueName用于为动画队列指定一个名称,如果省略该参数,jQuery默认使用标准的动画队列名:fx。

dequeue方法

方法 描述
dequeue() 执行动画函数队列头的第一个动画函数,并将该动画函数移出队列。

clearQueue方法

方法 描述
clearQueue([queueName]) 清空动画函数队列中的所有动画函数。

程序示例

下面的程序代码示范了如何访问默认动画队列的属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 动画队列 </title>
    <style>
        div {
            width: 60px;
            height: 60px;
            position: absolute;
            top: 60px;
            background: #f0f;
            display: none;
        }
    </style>
</head>

<body>
    <script type="text/javascript" src="../jquery-3.1.1.js">
    </script>
    <p>动画队列的长度是：
        <span></span>
    </p>
    <div></div>
    <script type="text/javascript">
        var $div = $("div");

        function runIt() {
            // 第1个动画：显示出来
            $div.show("slow");
            // 第2个动画：自动动画，水平左移300px,延迟2000毫秒
            $div.animate({ left: '+=300' }, 2000);
            // 第3个动画：卷起来
            $div.slideToggle(1000);
            // 第4个动画：放下来
            $div.slideToggle("fast");
            // 第5个动画：自动动画，水平右移300px
            $div.animate({ left: '-=300' }, 1500);
            // 第6个动画：隐藏出来
            $div.hide("slow");
            // 第7个动画：显示出来
            $div.show(1200);
            // 第8个动画：卷起来，动画完成后回调runIt
            $div.slideUp("normal", runIt);
        }
        // 控制每0.1秒调用一次该方法，该方法用于显示动画队列的长度
        function showIt() {
            
            var n = $div.queue();
            $("span").text(n.length);
            setTimeout(showIt, 100);
        }
        runIt();
        showIt();
    </script>
</body>

</html>

该程序中的粗体字代码为指定<div>元素依次调用了8个动画函数,这意味着jQuery将会把它们添加到动画队列中,然后该元素将会依次执行这个动画队列中的8个动画。每执行完一个动画效果,动画队列的长度减1。

jQuery命名空间下的queue和dequeue方法

除此之外,jQuery命名空间下也提供了jQuery.queue(element[,queueName])、jQuery.dequeue(element [,queueName])两个方法,这两个方法的功能与jQuery对象的queue方法和dequeue方法的功能相同,只是需要为它们传入element参数,用于指定操作哪个元素上的动画队列。