clearQueue( ) 메서드에는 애니메이션 정지 기능이 없다
애니메이션을 정지시키려면 stop( ) 메서드를 사용해야한다
애니메이션 정지 메서드
- stop( ) : 효과 및 애니메이션을 정지한다
- $(selector).stop( );
- $(selector).stop(clearQueue);
- $(selector).stop(clearQueue, goToEnd);
매개변수 clearQueue와 goToEnd는 불 자료형을 입력하며 입력하지 않으면 false를 입력한 것으로 간주한다
첫 번째 매개변수 clearQueue를 true로 설정하면 clearQueue( ) 메서드를 실행하는 것과 같은 효과를 낸다
두 번쨰 매개변수 goToEnd를 true로 설정하면 제자리에서 멈추는 것이 아니라 지정한 최종 형태에서 멈춘다
<style>
div {
width: 100px;
height: 100px;
background-color: orange;
position: relative;
}
</style>
<body>
<button>stop()</button>
<button>stop(true)</button>
<button>stop(false, true)</button>
<button>stop(true, true)</button>
<div></div>
</body>
버튼 4개 각각의 이름이 의미하는 형태의 메서드를 eval( ) 함수로 실행할 수 있다
$(function () {
$('button').click(function () {
var html = $(this).html();
var evalText = "$('div')." + html;
eval(evalText);
})
setInterval(function () {
$('div').animate({
left: '500'
}, 1000).animate({
left: '0'
}, 1000)
}, 2000)
});
div를 클릭하면 좌우로 움직이기 시작한다
각 button의 기능 정리
- stop( ) : 오른쪽으로 이동하는 것을 멈추고 제자리에서 바로 왼쪽으로 다시 이동
- stop(true) : 오른쪽으로 이동하는 것을 멈추고, 다음 setInterval( ) 함수가 실행될 때까지 대기한다
- stop(false, true) : 버튼을 누르는 순간 사각형이 오른쪽 끝으로 이동하고, 바로 왼쪽으로 이동한다
- stop(true, true) : 버튼을 누르는 순간 사각형이 오른쪽 끝으로 이동하고, 다음 setInterval( ) 함수가 실행될 때까지 대기한다
'Frontend > jQuery' 카테고리의 다른 글
| JS jQuery (part. 35) - 애니메이션 큐 (0) | 2020.08.14 |
|---|---|
| JS jQuery (part. 34) - 상대적 애니메이션 (0) | 2020.08.14 |
| JS jQuery (part. 33) - 사용자 정의 효과 (0) | 2020.08.13 |
| JS jQuery (part. 32) - 기본 시각 효과 (0) | 2020.08.13 |
| JS jQuery (part. 31) - 입력 양식 이벤트 (0) | 2020.08.12 |
