jQuery 공작소 : .stop()
jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!
stop 메소드는 실행중인 애니메이션을 멈춥니다.
예제 1
기본 예제
보기
그리고 달팽이가 어느정도 움직이면 아래 버튼을 눌러보세요.
소스
<style type="text/css">
.css_test {
position : relative;
text-align : right;
}
.css_test img {
position : relative;
}
</style>
<button type="button" onclick="j_test()">눌러보세요~ 달려라 달팽이 !!</button><br>
그리고 달팽이가 어느정도 움직이면 아래 버튼을 눌러보세요.<br><br>
<button type="button" onclick="$('.css_test img').stop()">;stop()</button>
<div class="css_test">
<img src="//superkts.com/img/css/dalpeng04.gif" />
</div>
<script type="text/javascript">
function j_test(){
$('.css_test img').css({left : 0});
var pos = $('.css_test img').position();
$('.css_test img').stop().animate({left : pos.left * -1}, 10000)
}
</script>
.css_test {
position : relative;
text-align : right;
}
.css_test img {
position : relative;
}
</style>
<button type="button" onclick="j_test()">눌러보세요~ 달려라 달팽이 !!</button><br>
그리고 달팽이가 어느정도 움직이면 아래 버튼을 눌러보세요.<br><br>
<button type="button" onclick="$('.css_test img').stop()">;stop()</button>
<div class="css_test">
<img src="//superkts.com/img/css/dalpeng04.gif" />
</div>
<script type="text/javascript">
function j_test(){
$('.css_test img').css({left : 0});
var pos = $('.css_test img').position();
$('.css_test img').stop().animate({left : pos.left * -1}, 10000)
}
</script>
관련 CSS
jQuery
$( 셀렉터 ).stop() - 셀렉터에 해당하는 애니메이션 효과를 바로 멈춥니다.
예제 2
finish 메서드와의 비교
보기
그리고 달팽이가 어느정도 움직이면 아래 버튼을 눌러보세요.
소스
<style type="text/css">
.css_test {
position : relative;
text-align : right;
}
.css_test img {
position : relative;
}
</style>
<button type="button" onclick="j_test()">눌러보세요~ 달려라 달팽이 !!</button><br>
그리고 달팽이가 어느정도 움직이면 아래 버튼을 눌러보세요.<br><br>
<button type="button" onclick="$('.css_test img').stop()">;stop()</button>
<button type="button" onclick="$('.css_test img').finish()">finish()</button>
<div class="css_test">
<img src="//superkts.com/img/css/dalpeng04.gif" />
</div>
<script type="text/javascript">
function j_test(){
$('.css_test img').css({left : 0});
var pos = $('.css_test img').position();
$('.css_test img').stop().animate({left : pos.left * -1}, 10000)
}
</script>
.css_test {
position : relative;
text-align : right;
}
.css_test img {
position : relative;
}
</style>
<button type="button" onclick="j_test()">눌러보세요~ 달려라 달팽이 !!</button><br>
그리고 달팽이가 어느정도 움직이면 아래 버튼을 눌러보세요.<br><br>
<button type="button" onclick="$('.css_test img').stop()">;stop()</button>
<button type="button" onclick="$('.css_test img').finish()">finish()</button>
<div class="css_test">
<img src="//superkts.com/img/css/dalpeng04.gif" />
</div>
<script type="text/javascript">
function j_test(){
$('.css_test img').css({left : 0});
var pos = $('.css_test img').position();
$('.css_test img').stop().animate({left : pos.left * -1}, 10000)
}
</script>
관련 CSS
jQuery
- stop 이 적용된 상태에서 finish 를 적용해도 아무 의미 없습니다.
- 애니메이션 효과에 skip 기능을 사용한다면 finish 메서드를 사용하면 좋겠죠.
- 그리고 애니메이션 중복실행 방지는 stop 메서드 !
- 애니메이션 효과에 skip 기능을 사용한다면 finish 메서드를 사용하면 좋겠죠.
- 그리고 애니메이션 중복실행 방지는 stop 메서드 !
+ 관련 jQuery +
jQuery 홈페이지 .stop() API 문서 : http://api.jquery.com/stop/