.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="http://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="http://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 메서드 !
+ 관련 jQuery +
jQuery 홈페이지 .stop() API 문서 : http://api.jquery.com/stop/