jQuery 공작소 : .dequeue()

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

dequeue 메소드는 queue 사용시 마감처리를 합니다.
마감처리란 것이 복잡할 수 있는데요 예제를 보시면 그렇지는 않습니다. ^^

예제 1
기본 예제
보기



소스
<style type="text/css">
    .css_test {
        text-align : left;
        height : 300px;
    }
    .css_test img {
        position : relative;
        width : 200px;
        margin-top : 10px;
    }
</style>
<button type="button" onclick="j_test()">눌러보세용</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' }, 500)
        .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' }, 500)
    }
</script>
관련 CSS
jQuery

.queue(function(){
        $( this ).attr( 'src', '//superkts.com/img/huk1.gif' ).dequeue();
})

- queue 메서드를 사용했을때 내부에서 반드시 사용해 주어야하는 메서드입니다.
- 그냥 이게 전부입니다. ^^; 그런것 같네요.

예제 2
dequeue 하지 않으면 고장납니다!
보기



소스
<style type="text/css">
    .css_test {
        text-align : left;
        height : 300px;
    }
    .css_test img {
        position : relative;
        width : 200px;
        margin-top : 10px;
    }
</style>
<button type="button" onclick="j_test()">눌러보세용</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' }, 500)
        .queue(function(){
            // queue 메소드를 사용했다면 반드시 dequeue 를 사용해서 마감처리 해야함
            $(this).attr('src', '//superkts.com/img/huk2.gif');
        })
        .delay(1000)
        .queue(function(){
            $(this).attr('src', '//superkts.com/img/huk1.gif').dequeue();
        })
        .animate({ left:'+=200' }, 500)
    }
</script>
관련 CSS
jQuery

- 첫번째 예제와 같은소스인데 중간에 dequeue 를 하지 않았습니다.
- 얼굴이 움직이다가 멈추며 버튼을 다시 눌러도 실행되지 않습니다.
- 실행되지 않는 이유는 중복방지 체크에 걸려서 그런것 입니다. (정상 종료라면 실행됩니다)
- 애니메이션이 멈췄지만 실행이 종료된 상태는 아닙니다. 그냥 진행도 아니고 종료도 아닌 상태이지요.
- dequeue 하세요 ^^

※ 그다지 많이 쓰일법한 메서드는 아닙니다.
※ 이런걸 쓸 정도라면 평범한 소스는 아니겠지요. (!)

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