.finish()
返回: jQuery
.finish( [queue ] )
描述：针对匹配的元素，停止当前正在运行的动画，删除所有队列中的动画，并结束所有动画。
当在一个元素上调用.finish()方法时，当前正在运行的动画以及所有的队列动画（如果有的话）立即停止，它们的CSS属性设置为它们的目标值。所有队列的动画都被移除。
如果提供了第一个参数，只有队列中以这个字符串代表的动画会停止。
.finish()方法近似于.stop(true, true)，它清除了队列，而且当前动画跳到它的末值。毕竟，它不同于.finish()，.finish()还会导致所有的队列动画的CSS属性跳到它们的末值。
通过把jQuery.fx.off设置成true，可以全局地停掉所有的动画。如果这样做的话，所有的动画方法都会立即把元素设置到它们在调用方法时设定的最终状态，而不是显示一个动画效果。
示例
点击一次Go按钮开始动画，点击别的按钮以查看它们如果对当前的动画和队列中的动作产生影响。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>finish demo</title>
<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="https://code.jquery.com/jquery-1.10.2.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>
演示结果