stop
원문 링크 
http://api.jquery.com/stop/
개요 : 현재 움직이고 있는 애니메이션 효과를 멈춥니다.
- .stop( [clearQueue] [, jumpToEnd] )
- clearQueue 부울 값을 세팅하여 대기중인 효과들의 제거를 결정합니다. 기본값은 false.
- jumpToEnd 부울 값을 세팅하여 현재 진행중인 애니메이션을 완료할지를 결정합니다. 기본값은 false.
- .stop( [queue] [, clearQueue] [, jumpToEnd] )
- queue 애니메이션을 멈출 큐 이름
- clearQueue 부울 값을 세팅하여 대기중인 효과들의 제거를 결정합니다. 기본값은 false.
- jumpToEnd 부울 값을 세팅하여 현재 진행중인 애니메이션을 완료할지를 결정합니다. 기본값은 false.
.stop() 함수가 호출되면, 현재 진행중인 애니메이션이 그 즉시 멈춥니다. 만약 어떤 요소가 .slideUp() 함수로 숨겨질 때 .stop() 함수를 호출하면, 해당 요소는 height가 축소된 채로 남아있게 됩니다. 콜백함수는 호출되지 않습니다.
만일 하나 이상의 애니메이션 효과 함수가 요소에 있었다면, 나머지 함수들은 대기열에 쌓여있게 됩니다. 쌓인 효과들은 최초의 함수가 완료될 때까지 실행되지 않습니다. 만일 clearQueue 인자로 true를 적용하면, 큐에 쌓여서 대기중이던 애니메이션 효과들이 제거되고 다시 실행되지 않습니다.
jumpToEnd 인자로 true 를 적용하면, 현재 애니메이션은 멈추고, CSS 속성들이 요소에 바로 반영됩니다. 이전에 봤던 .slideUp() 함수를 예로 보면, 요소가 그 즉시 사라지게 되는 것입니다. 또한 콜백 함수도 바로 실행이 됩니다.
jQuery 1.7 버젼부터, 첫번째 인자에 문자열을 사용하면, 애니메이션은 멈추고 그 문자열이 보여지게 됩니다.
The usefulness of the .stop() 함수의 장점은 요소에 mouseenter 나 mouseleave 함수와 같이 사용하는 애니메이션 효과가 필요할 때 나타납니다.:
<div id="hoverme"> Hover me <img id="hoverme" src="book.png" alt="" width="100" height="123" /> </div>
아주 나이스한 페이드 효과를 주길 원할 때 .stop(true, true) 형태를 사용하면 좋습니다. 아래처럼 말입니다.
$('#hoverme-stop-2').hover(function() {
$(this).find('img').stop(true, true).fadeOut();
}, function() {
$(this).find('img').stop(true, true).fadeIn();
});애니메이션 토글 ( Toggling Animations )
jQuery 1.7 버젼부터는, .stop() 을 사용해서 토글되는 애니메이션을 멈추고 jQuery 내부 효과를 가로챌 수 있습니다. 이전 버젼에서는, .stop() 함수를 호출하면 토글되던 애니메이션이 진행된 후 멈췄었습니다. 그래서 함수 호출 시점의 상태를 알 수가 없었습니다. 모든 나머지 애니메이션 효과들은 중간에서 부터 새로 시작되었고, 때로는 사라진 채로 나머지 효과들이 진행되기도 했습니다. 새로운 형태의 사용법은 마지막 예제에서 보실 수 있습니다.
애니메이션 효과들은 전역적으로 멈추게 하고 싶다면 $.fx.off 를 true 로 하면 됩니다.. 이렇게 세팅하면 화면에 보이는 모든 애니메이션 효과들이 그 즉시 멈추게 됩니다.
예 제
앞으로 뒤로 멈춤 버튼입니다.
<!DOCTYPE html>
<html>
<head>
<style>div {
position: absolute;
background-color: #abc;
left: 0px;
top:30px;
width: 60px;
height: 60px;
margin: 5px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="go">Go</button>
<button id="stop">STOP!</button>
<button id="back">Back</button>
<div class="block"></div>
<script>
/* Start animation */
$("#go").click(function(){
$(".block").animate({left: '+=100px'}, 2000);
});
/* Stop animation when button is clicked */
$("#stop").click(function(){
$(".block").stop();
});
/* Start animation in the opposite direction */
$("#back").click(function(){
$(".block").animate({left: '-=100px'}, 2000);
});
</script>
</body>
</html>미리보기
Go 버튼과 Back 버튼을 누른 수만큼 Stop 버튼을 눌러야 되네요. 여러번 클릭해 보세요.
예 제
클릭하면 슬라이드업 애니메이션이 토글됩니다.
<!DOCTYPE html>
<html>
<head>
<style>.block {
background-color: #abc;
border: 2px solid black;
width: 200px;
height: 80px;
margin: 10px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="toggle">slideToggle</button>
<div class="block"></div>
<script>
var $block = $('.block');
/* Toggle a sliding animation animation */
$('#toggle').on('click', function() {
$block.stop().slideToggle(1000);
});
</script>
</body>
</html>미리보기
위 본문에 나와있던 설명에 대한 예제입니다. 멈추고 토글이 되네요. 1.7버젼 이전에는 안됬었나 봐요.
stop 을 종종 쓸일이 있겠죠. 뭐 애니메이션 제작할 일은 없겠지만요. ^^
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| ajaxError() Ajax 에러가 발생되면 호출 (0) | 2012.06.19 |
|---|---|
| ajaxComplete() Ajax가 완료되면 호출 (4) | 2012.06.15 |
| jQuery.ajax() HTTP 비동기 데이터 교환 (0) | 2012.06.12 |
| toggle(), 요소 표시 또는 숨기기, 토글하기 (0) | 2012.05.08 |
| slideUp(), 슬라이드 효과로 숨기기 (0) | 2012.04.25 |
| slideToggle(), 슬라이드 토글하기 (1) | 2012.04.25 |
| slideDown(), 슬라이드 효과로 보이기 (0) | 2012.04.25 |
| show(), 요소 보이게 하기 (0) | 2012.04.25 |