목차
- stop() 구문
- stop() 예제1 - 옵션값 없는 경우
- stop() 예제2 - 옵션값 있는 경우
- stop(true,true) vs finish() 차이
stop() 구문
$(selector).stop(stopAll,goToEnd)
[매개변수]
stopAll
선택. 대기 중 애니메이션 중지할지 여부 지정. (참거짓)
- false : 모두 멈춤 X. (= 현재 실행 중 메서드만 멈춤.) (기본값)
- true : 모두 멈춤 O. (= 모든 메서드 다 멈춤.)
goToEnd
선택. 현재 실행 중 애니메이션 완료 여부 지정. (참거짓)
- false : 완료 X. (= 바로 멈춤). (기본값)
- true : 완료 O. (= 실행 중인 건 끝마침.)
※ 참고
두 옵션의 기본값이 모두 false 이므로,
옵션을 따로 적지 않으면 현재의 움직임만 멈추고, 다른 움직임은 계속 작동 함.
※ 주의
true, false 값은 따옴표 없이 입력.
stop() 예제1 - 옵션값 없는 경우
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#src").click(function(){
});
$("#stop").click(function(){
$("#url").stop();
});
});
</script>
<style>
#src, #url {
width:300px;
padding: 5px 0;
font-size: 18px;
text-align: center;
background-color: #fd84be;
color: white;
border: 1px solid red;
border-radius: 3px;
}
#url {
padding: 50px 0;
border-top:none;
display: none;
}
</style>
<button id="stop">잠깐 멈추시지!</button>
<div id="src">홈짱닷컴 주소 보기</div>
<div id="url">Homzzang.com</div>
결과보기
※ 「홈짱닷컴 주소보기」부분 클릭 후, 상단 「잠깐 멈추시지!」버튼 클릭.
stop() 예제2 - 옵션값 있는 경우
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({height: 200, lineHeight: 200}, 3000);
$("div").animate({width: 500}, 3000);
});
$("#stop").click(function(){
$("div").stop(false, false);
});
});
</script>
<style>
div {
margin-top:20px;
background:#fd86bf;
width:300px;
height:100px;
line-height:100px;
text-align:center;
position:absolute;
}
</style>
<p>
<button id="start">움직여라!</button>
<button id="stop">멈춰보시지!</button>
</p>
<div>홈짱닷컴 Homzzang.com</div>
결과보기
※ false, false를 각각 true로도 변경해 어떤 식으로 변하는지 테스트 권장.
stop(true,true) vs finish() 차이
stop(true,true)
모든 animation 중지. / 현재 실행 중 animation은 끝까지 완료. (= 즉, 이미 실행된 animation까지만 완료.)
queue의 모든 animation을 바로 완료시킴.
[stop(true,true) 예제]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({height: 200}, 2000);
$("div").animate({width: 200}, 2000);
$("div").css("background-color", "red");
});
$("#complete").click(function(){
$("div").stop(true,true);
});
});
</script>
<button id="start">Start</button>
<button id="complete">Stop</button><br /><br />
<div style="background:pink;height:100px;width:100px"></div>
결과보기
[finish() 예제]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({height: 200}, 2000);
$("div").animate({width: 200}, 2000);
$("div").css("background-color", "red");
});
$("#complete").click(function(){
$("div").finish();
});
});
</script>
<button id="start">Start</button>
<button id="complete">Stop</button><br /><br />
<div style="background:pink;height:100px;width:100px"></div>
결과보기
