jQuery 공작소 : .clearQueue()

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

clearQueue 메소드는 예약된 애니메이션을 초기화 합니다.

예제 1
기본 예제 - 예약된 애니메이션 효과 초기화
보기



소스
<style type="text/css">
    .css_test {
        text-align : left;
        height : 150px;
    }
    .css_test img {
        position : relative;
        width : 200px;
        margin-top : 20px;
    }
</style>
<button type="button" onclick="j_test()">눌러보세용</button>
<button type="button" onclick="$('.css_test img').clearQueue()">;clearQueue() - 얼굴이 움직일때 눌러보세요</button>

<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})

        .animate({ left:'+=200' }, 1500)
        .queue(function(){
            // queue 메소드를 사용했다면 반드시 dequeue 를 사용해서 마감처리 해야함
            $(this).attr('src', '//superkts.com/img/huk2.gif').dequeue();
        })
        .delay(1000)
        .queue(function(){
            $(this).attr('src', '//superkts.com/img/huk1.gif').dequeue();
        })
        .animate({ left:'+=200' }, 1500)
    }
</script>
관련 CSS
jQuery

- 얼굴은 총 4단계로 움직입니다.
- 오른쪽으로 움직이고, 표정 한번 변하고 다시 표정 돌아오고 오른쪽으로 움직이고
- 움직이는 과정에서 clearQueue 버튼을 누르면 애니메이션이 종료됩니다.
- 유심히 볼것은 움직이는 상태에서 버튼을 누르면 해당 움직임까지는 진행 후 끝이납니다.
- 예약된 애니메이션을 지우는 것이므로 현재진행은 마치고 다음진행은 없는것이죠.

$( 셀렉터 ).clearQueue()  -  해당 셀렉터의 애니메이션 예약(queue)을 지우기

예제 2
stop 메서드와 비교해보기
보기



소스
<style type="text/css">
    .css_test {
        text-align : left;
        height : 150px;
    }
    .css_test img {
        position : relative;
        width : 200px;
        margin-top : 10px;
    }
</style>
<button type="button" onclick="j_test()">눌러보세용</button>
<button type="button" onclick="$('.css_test img').stop()">stop() - 얼굴이 움직일때 눌러보세요</button>

<div class="css_test">
    <img src="//superkts.com/img/huk1.gif" />
</div>
<br><br><br>
<script type="text/javascript">
    function j_test(){
        $( '.css_test img' )
        .css({top:0, left:0})
        .animate({ left:'+=300' }, 2000)
    }
</script>
관련 CSS
jQuery

- stop 메서드는 진행중인 애니메이션을 바로 멈춥니다.

참고 메서드 : .stop()

예제 3
stop 메서드의 원하지 않는 작동
보기



소스
<style type="text/css">
    .css_test {
        text-align : left;
        height : 150px;
    }
    .css_test img {
        position : relative;
        width : 200px;
        margin-top : 20px;
    }
</style>
<button type="button" onclick="j_test()">눌러보세용</button>
<button type="button" onclick="$('.css_test img').stop()">stop() - 처음 얼굴이 움직일때 눌러보세요</button>

<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})

        .animate({ left:'+=200' }, 1500)
        .queue(function(){
            // queue 메소드를 사용했다면 반드시 dequeue 를 사용해서 마감처리 해야함
            $(this).attr('src', '//superkts.com/img/huk2.gif').dequeue();
        })
        .delay(1000)
        .queue(function(){
            $(this).attr('src', '//superkts.com/img/huk1.gif').dequeue();
        })
        .animate({ left:'+=200' }, 1500)
    }
</script>
관련 CSS
jQuery

- 아마도 모든 애니메이션이 바로 종료되는것을 바랬는데 그렇게 되지 않았네요.
- 애니메이션 중인 얼굴은 멈췄지만 뒤에 예약된 작업까지 지워버리지는 않았으니까요.
- 다음예제에서 완벽히 멈춰볼까요?

예제 4
완벽하게 애니메이션을 멈추는 방법
보기


움직여랏 버튼 한번당 위 버튼 각 한번씩 눌러서 따로 비교해 보세요.



소스
<style type="text/css">
    .css_test {
        text-align : left;
        height : 150px;
    }
    .css_test img {
        position : relative;
        width : 200px;
        margin-top : 20px;
    }
</style>
<button type="button" onclick="j_test()">움직여랏!</button><br>
<button type="button" onclick="$('.css_test img').clearQueue().stop()">완벽히 멈추기</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' }, 3000)
        .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
jQuery

- 순서상의 차이로 발생한 문제입니다.
- 원했던건 바로 멈추는 것인데, 얼굴 표정이 변하였네요.

$( '.css_test img' ).clearQueue().stop()  -  일단 예약을 지우고 애니메이션을 멈춰야 원하는 결과가 나옵니다.
$( '.css_test img' ).stop().clearQueue()  -  먼저 멈췄지만 뒤에 예약된 표정변화가 실행되었네요.

- 기억하세요~ 지우고 멈춥니다~

※ 이런것까지 사용해야 할 정도면 복잡한걸 해야하는 경우겠죠? 화이팅입니다 ~! ㅎ

예제 5
애니메이션 메소드를 한개만 사용했다면 그냥 stop 사용
보기



소스
<style type="text/css">
    .css_test {
        text-align : left;
        height : 150px;
    }
    .css_test img {
        position : relative;
        width : 200px;
        margin-top : 20px;
    }
</style>
<button type="button" onclick="j_test()">움직여랏!</button>
<button type="button" onclick="$('.css_test img').stop()">멈추기</button>

<div class="css_test">
    <img src="//superkts.com/img/huk1.gif" />
</div>
<br><br><br>
<script type="text/javascript">
    function j_test(){
        $( '.css_test img:not(:animated)' ).css({top:0, left:0}).animate({ left:'+=300' }, 3000);
    }
</script>
관련 CSS
jQuery

- animate 메서드를 하나만 사용했다면 그냥 stop 메서드 하나로 됩니다. ^^

+ 관련 jQuery +
jQuery 홈페이지 .clearQueue() API 문서 : http://api.jquery.com/clearQueue/