stop 메소드는 효과 및 애니메이션을 정지하는 메소드입니다.
그리고 다음 2가지 파라미터를 가집니다.
clearQueue와 goToEnd인데 첫 번째 파라미터를 true로 설정하면
clearQueue 메소드를 실행하는 것과 같은 효과를 냅니다. 두 번째 파라미터
인 goToEnd를 true로 설정하면 제자리에서 멈추는 것이 아니라 지정한 최종
형태에서 멈춥니다.
소스코드
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 100px; height: 100px;
background-color: orange;
position: relative;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
//이벤트를 연결합니다.
$('button').click(function(){
//변수 선언
var html = $(this).html();
var evalText = "$('div')." + html;
//메소드를 실행합니다.
//eval 함수를 사용하면 JavaScript 소스 코드를 동적으로 실행할 수 있습니다.
eval(evalText);
});
//애니메이션을 시작합니다.
setInterval(function(){
$('div').animate({
left: '500'
}, 1000).animate({
left: '0'
}, 1000);
}, 2000);
});
</script>
</head>
<body>
<button>stop()</button>
<button>stop(true)</button>
<button>stop(false, true)</button>
<button>stop(true, true)</button>
<div></div>
</body>
</html>
실행화면
stop()버튼은 이동을 멈추고 바로 왼쪽으로 이동한후 다시 이동합니다.
stop(true)는 이동하는 것을 멈추고 setInterval함수가 실행될 때까지 기다립니다.
stop(false, true)는 사각형이 바로 오른쪽 끝으로 이동후 다시 왼쪽으로 이동합니다.
stop(true, true)는 사각형이 바로 오른쪽 끝으로 이동후 다음 setInterval 함수가 실행될 때까지 대기합니다.
출처 : 모던 웹을 위한 javascript jquery 입문
'프로그래밍 > Jquery' 카테고리의 다른 글
| Jquery - $.ajax() 메서드의 옵션 (0) | 2014.12.28 |
|---|---|
| jquery - 슬라이더 효과를 사용한 이미지 전환 방법 (이미지슬라이더) (0) | 2014.12.21 |
| jquery - Jquery UI Effect 플러그인 사용법 (0) | 2014.11.02 |
| jquery - delay 메소드를 이용한 애니메이션 지연 방법 (0) | 2014.11.02 |
| jquery - 애니메이션 큐 및 큐를 clear 하는 방법 (0) | 2014.10.27 |
| jquery - animate 메소드를 이용한 동적으로 스타일 변화시키기 (0) | 2014.10.27 |
| jquery - hover 메소드와 animate 메소드를 이용한 마우스 오버 애니메이션 효과 만들기 (0) | 2014.10.27 |
| jquery - innerfade 플러그인을 이용한 사진 변경 효과 적용하기 (0) | 2014.10.27 |