.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>
게시글 목록
| 번호 | 제목 |
|---|---|
| 15786 | |
| 15785 | |
| 15784 | |
| 15783 | |
| 15782 | |
| 15781 | |
| 15780 | |
| 15777 | |
| 15776 | |
| 15775 | |
| 15774 | |
| 15773 | |
| 15772 | |
| 15768 | |
| 15767 | |
| 15766 |
JavaScript
날짜 date 란?
1
|
| 15763 | |
| 15762 | |
| 15761 | |
| 15756 | |
| 15753 |
JavaScript
정규식으로 유투브 주소에서 아이디 값만 추출
|
| 15752 | |
| 15751 |
MySQL
MySQL 세자리 마다 콤마 찍기
1
|
| 15750 |
JavaScript
각 단어의 첫글자를 대문자로
|
| 15749 | |
| 15747 | |
| 15746 | |
| 15745 | |
| 15744 | |
| 15743 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기