.finish ([queue])
.finish ([queue])
설명 : 현재 실행중인 애니메이션을 중지하고 대기중인 애니메이션을 모두 제거하고 일치하는 요소의 모든 애니메이션을 완료하십시오.
.finish()요소가 호출 되면 현재 실행중인 애니메이션과 대기중인 모든 애니메이션이 즉시 중지되고 해당 CSS 속성이 대상 값으로 설정됩니다. 대기중인 애니메이션은 모두 제거됩니다.
첫 번째 인수가 제공되면 해당 문자열로 표시된 대기열의 애니메이션 만 중지됩니다.
이 .finish()메서드는 .stop(true, true)대기열을 지우고 현재 애니메이션이 끝 값으로 점프하는 것과 비슷 합니다. 그러나 다른 점은 대기중인.finish() 모든 애니메이션 의 CSS 속성이 최종 값으로 이동한다는 점입니다.
속성 $.fx.off을 로 설정하면 애니메이션이 전역 적으로 중지 될 수 있습니다 true. 이 작업이 완료되면 모든 애니메이션 메서드는 효과를 표시하는 대신 요소가 호출 될 때 즉시 최종 상태로 설정합니다.
예:
이동 단추를 한 번 클릭하여 애니메이션을 시작한 다음 다른 단추를 클릭하여 현재 및 대기중인 애니메이션에 미치는 영향을 확인합니다.
<!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>