jQuery中animate动画队列的停止和清除,转载自web前端开发
.finish([queue ])
描述: 停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画
当.finish()在一个元素上被调用，立即停止当前正在运行的动画和所有排队的动画（如果有的话），并且他们的CSS属性设置为它们的目标值（愚人码头注：就是所有动画的目标值）。所有排队的动画将被删除。
如果第一个参数提供，该字符串表示的队列中的动画将被停止。
.finish()方法和.stop(true, true)很相似，.stop(true, true)将清除队列，并且目前的动画跳转到其最终值。但是，不同的是，.finish() 会导致所有排队的动画的CSS属性跳转到他们的最终值。
动画可能因为全局的$.fx.off 属性设置为 true而停止。当这样做时，所有动画方法将立即设置元素的css属性为其最终调用后的状态，而不是显示动画效果。
例子:
Click the Go button once to start the animation, and then click the other buttons to see how they affect the current and queued animations.
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
| <!DOCTYPE html>
<html>
<head>
<style>.box {
position: absolute;
top: 10px;
left: 10px;
width: 15px;
height: 15px;
background: black;
}
#path {
height: 244px;
font-size: 70%;
border-left: 2px dashed red;
border-bottom: 2px dashed green;
border-right: 2px dashed blue;
}
button {
width: 12em;
display: block;
text-align: left;
margin: 0 auto;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="box"></div>
<div id="path">
<button id="go">Go</button>
<br>
<button id="bstt" class="b">.stop(true,true)</button>
<button id="bcf" class="b">.clearQueue().finish()</button>
<br>
<button id="bstf" class="b">.stop(true, false)</button>
<button id="bcs" class="b">.clearQueue().stop()</button>
<br>
<button id="bsff" class="b">.stop(false, false)</button>
<button id="bs" class="b">.stop()</button>
<br>
<button id="bsft" class="b">.stop(false, true)</button>
<br>
<button id="bf" class="b">.finish()</button>
</div>
<script>
var horiz = $("#path").width() - 20,
vert = $("#path").height() - 20;
var btns = {
bstt: function () {
$("div.box").stop(true, true);
},
bs: function () {
$("div.box").stop();
},
bsft: function () {
$("div.box").stop(false, true);
},
bf: function () {
$("div.box").finish();
},
bcf: function () {
$("div.box").clearQueue().finish();
},
bsff: function () {
$("div.box").stop(false, false);
},
bstf: function () {
$("div.box").stop(true, false);
},
bcs: function () {
$("div.box").clearQueue().stop();
}
};
$("button.b").on("click", function () {
btns[this.id]();
});
$("#go").on("click", function () {
$(".box")
.clearQueue()
.stop()
.css({
left: 10,
top: 10
})
.animate({
top: vert
}, 3000)
.animate({
left: horiz
}, 3000)
.animate({
top: 10
}, 3000);
});
</script>
</body>
</html>
|
具体演示效果参看原网页