jQuery 动画队列分析

引子

最近使用到了 jQuery,这篇文章就介绍一下 jQuery 动画的一个特性,jQuery 动画,在进入正题前,看一个例子:

1
2
3
4
$(".animate").on("click", function () {
$(".box").hide(500).show(500);
console.log("动画执行完成了吗");
});

这段代码会先输出动画执行完成了吗,然后在进行动画,这就说明动画执行时异步的,而不是同步的,jQuery 在这里对动画就是通过动画队列控制的。

queue

queue有三种参数接受:

  • 传入一个queueName,返回该队列。
  • 传入一个queueName和一个newQueue,用新的队列替换掉指定队列。
  • 传入一个queueName和一个callback,将callback函数添加到指定队列中。
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
61
62
63
64
65
66
67
68
69
$(".animate").on("click", function () {
setInterval(function () {
$(".info")
.last()
.text("当前动画队列长度:" + $(".box").queue("fx").length);
}, 100);
$(".box")
.animate(
{
width: 300,
},
500
)
.animate(
{
width: 400,
},
500
)
.animate(
{
width: 500,
},
500
)
.animate(
{
width: 600,
},
500
)
.animate(
{
width: 400,
},
500
)
.animate(
{
width: 100,
},
500
);

console.log($(".box").queue("fx"));

$(".box").queue("fx", function () {
$(".box").animate(
{
height: 400,
},
500
);
});
$(".box")
.animate(
{
width: 300,
},
500
)
.animate(
{
width: 600,
},
500
);
console.log($(".box").queue("fx"));
});

如上代码,queue()方法的返回函数里animate()没有执行,css()执行了,后面的两个animate()也没有执行,这说明了一件事,queue()方法虽然可以给动画队列添加新的动画,但是无法自动执行,而且会中断动画队列的执行。

dequeue([queueName])

dequeue()方法用来执行匹配元素队列的下一个函数

  • queueName:队列名
1
2
3
4
5
6
7
8
9
$(".box").queue("fx", function () {
$(".box").animate(
{
height: 400,
},
500
);
$(this).dequeue();
});

执行之后,会发现 queue()方法会把回调函数里新增的动画放在动画队列的最后才执行

clearQueue([queueName])

clearQueue()方法用于清除动画队列中未执行的动画,并不影响当前动画效果(即正在进行的动画不受影响),当重新执行时,动画队列重新开始,但已经执行过的队列,不会再显示效果。

finish()

停止当前动画,并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态,通过queue方法添加的动画不会展示。

stop([clearQueue ] [, jumpToEnd ])

停止当前正在运行的动画

  • 参数为空:停止当前动画,执行动画队列中的下一个动画。
  • [clearQueue ]:boolean 类型,停止当前正在进行的动画,清空未执行的动画队列,影响动画效果。
  • [, jumpToEnd ]:boolean 类型,停止当前正在进行的动画,清空未执行的动画队列,并直接跳到本次动画的结束。

小结

关于 jQuery 的动画相关函数就是这些了,在 jsbin 上写了一个 demo,具体效果可以在下面这个 demo 里查看。

作者

bert_cai

发布于

2019-07-10

更新于

2020-11-16

许可协议

评论