jQuery 공작소 : 다중 예약 애니메이션 완벽히 멈추기

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

애니메이션 효과가 예약되어 여러개 실행되거나, delay 메소드나 queue 메서드를 같이 사용했을 경우
실행중인 애니메이션을 완벽히 멈추는 방법입니다.

※ 더 좋은 방법이 있을 수 있습니다. ^^;

예제 1
애니메이션 멈추기
보기
움직여랏 버튼을 눌러보세요.
처음 한번은 애니메이션을 끝까지 봐주세요.
다시 움직여랏 버튼을 먼저 누르고 멈추기 버튼을 눌러보세요.





소스
<style type="text/css">
    .css_test {
        text-align : left;
        height : 150px;
    }
    .css_test img {
        position : relative;
        width : 200px;
        margin-top : 20px;
    }
</style>

움직여랏 버튼을 눌러보세요.<br>
처음 한번은 애니메이션을 끝까지 봐주세요.<br>
다시 움직여랏 버튼을 먼저 누르고 멈추기 버튼을 눌러보세요.<br>
<br>
<button type="button" onclick="j_test()">움직여랏!</button>
<button type="button" onclick="$('.css_test img').clearQueue().stop()">완벽히 멈추기</button><br>

<div class="css_test">
    <img src="//superkts.com/img/huk1.gif" />
</div>
<br><br><br>

<script type="text/javascript">
    function j_test(){
        var q = $( '.css_test img' ).queue('fx'); // fx 는 기본 이름입니다. (지정하지 않았을 때)
        if(q.length > 0) return; // 예약이 되어있는 상태면 실행 종료하기 (버튼 연타시 중복실행 방지)

        // 보기 편하게 줄바꿔서 코딩했습니다.
        $( '.css_test img' )
        .css({ top : 0, left : 0 })
        .attr( 'src', '//superkts.com/img/huk1.gif' )
        .animate({ left : '+=200' }, 1500)
        .queue(function(){
            // queue 메소드를 사용했다면 반드시 dequeue 를 사용해서 마감처리 해야함
            $(this).attr( 'src', '//superkts.com/img/huk2.gif' ).dequeue(); // 표정 바꾸기
        })
        .delay(1000) // 1초 대기
        .queue(function(){
            $(this).attr( 'src', '//superkts.com/img/huk1.gif' ).dequeue(); // 표정 되돌리기
        })
        .animate({ left : '+=200' }, 1500)
    }
</script>
관련 CSS
heightmargin-toppositiontext-alignwidth
jQuery

$( 셀렉터 ).clearQueue().stop()  -  네 그냥 이게 전부입니다.
※ 순서가 중요합니다.

참고 메서드 : .clearQueue() .stop()

+ 소스 다운로드 +
예제 2
잘 못된 예 - stop 메서드만 사용한 경우
보기
움직여랏 버튼을 먼저 누르고 빠르게 멈추기 버튼을 눌러보세요.
멈추기 버튼을 누르면 얼굴이 놀랄것입니다. 멈춰야 하는데 말이죠.
그리고 다시 움직일 것입니다.





소스
<style type="text/css">
    .css_test {
        text-align : left;
        height : 150px;
    }
    .css_test img {
        position : relative;
        width : 200px;
        margin-top : 20px;
    }
</style>
움직여랏 버튼을 먼저 누르고 빠르게 멈추기 버튼을 눌러보세요.<br>
멈추기 버튼을 누르면 얼굴이 놀랄것입니다. 멈춰야 하는데 말이죠.<br>
그리고 다시 움직일 것입니다.<br>
<br>
<button type="button" onclick="j_test()">움직여랏!</button>
<button type="button" onclick="$('.css_test img').stop()">멈추기</button><br>

<div class="css_test">
    <img src="//superkts.com/img/huk1.gif" />
</div>
<br><br><br>
<script type="text/javascript">
    function j_test(){
        var q = $( '.css_test img' ).queue('fx'); // fx 는 기본 이름입니다. (지정하지 않았을 때)
        if(q.length > 0) return; // 예약이 되어있는 상태면 실행 종료하기 (버튼 연타시 중복실행 방지)

        // 보기 편하게 줄바꿔서 코딩했습니다.
        $( '.css_test img' )
        .css({top:0, left:0})
        .attr('src', '//superkts.com/img/huk1.gif')
        .animate({ left:'+=200' }, 1500)
        .queue(function(){
            // queue 메소드를 사용했다면 반드시 dequeue 를 사용해서 마감처리 해야함
            $(this).attr('src', '//superkts.com/img/huk2.gif').dequeue();
        })
        .delay(1000) // 1초 대기
        .queue(function(){
            $(this).attr('src', '//superkts.com/img/huk1.gif').dequeue();
        })
        .animate({ left:'+=200' }, 1500)
    }
</script>
관련 CSS
heightmargin-toppositiontext-alignwidth
jQuery
- 얼굴이 말을 잘 안듣죠.
예제 3
잘 못된 예 - stop 메서드와 clearQueue 메서드 순서를 바꾼 경우
보기
얼굴 표정이 변하기 전에 멈추기 버튼을 눌러보세요.
애니메이션은 멈추지만 표정이 변했습니다.
표정도 변하지않고 움직임도 멈추어야 완벽히 멈춘것이죠.





소스
<style type="text/css">
    .css_test {
        text-align : left;
        height : 150px;
    }
    .css_test img {
        position : relative;
        width : 200px;
        margin-top : 20px;
    }
</style>

얼굴 표정이 변하기 전에 멈추기 버튼을 눌러보세요.<br>
애니메이션은 멈추지만 표정이 변했습니다.<br>
표정도 변하지않고 움직임도 멈추어야 완벽히 멈춘것이죠.<br>
<br>
<button type="button" onclick="j_test()">움직여랏!</button>
<button type="button" onclick="$('.css_test img').stop().clearQueue()">완벽히 멈추기?</button><br>

<div class="css_test">
    <img src="//superkts.com/img/huk1.gif" />
</div>
<br><br><br>
<script type="text/javascript">
    function j_test(){
        var q = $( '.css_test img' ).queue('fx'); // fx 는 기본 이름입니다. (지정하지 않았을 때)
        if(q.length > 0) return; // 예약이 되어있는 상태면 실행 종료하기 (버튼 연타시 중복실행 방지)

        // 보기 편하게 줄바꿔서 코딩했습니다.
        $( '.css_test img' )
        .css({top:0, left:0})
        .attr('src', '//superkts.com/img/huk1.gif')
        .animate({ left:'+=200' }, 1500)
        .queue(function(){
            // queue 메소드를 사용했다면 반드시 dequeue 를 사용해서 마감처리 해야함
            $(this).attr('src', '//superkts.com/img/huk2.gif').dequeue();
        })
        .delay(1000) // 1초 대기
        .queue(function(){
            $(this).attr('src', '//superkts.com/img/huk1.gif').dequeue();
        })
        .animate({ left:'+=200' }, 1500)
    }
</script>
관련 CSS
heightmargin-toppositiontext-alignwidth
jQuery

- 표정이 변하기 전에 멈추기를 누르면 멈추기는 하지만 표정이 변합니다.
- 표정이 변하는 부분이 실행된 것인데요. 순서상의 차이로 이렇게 됩니다.
- 의도했던것은 누르자 마자 모든것이 멈추게 되는것입니다.
- queue 를 사용했다면 반드시 clearQueue 를 먼저 해주어야 합니다.

예제 4
같이 보면 좋은 메서드
jQuery
.stop() .finish() .animate()
☞ 목록으로 가기
jQuery 공작소  /   CSS 공작소