.queue()

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

queue 메소드는 animate 메소드 사이에서 지정한 작업을 수행합니다.

+_+
예제 1
queue 를 사용하여 애니메이션 종료후 함수 실행하기
보기
애니메이션이 끝난후 queue 를 사용해서 얼굴 표정을 원래대로 바꿔봅니다.




소스
<style type="text/css">
    .css_test {
        text-align : center;
        height : 300px;
    }
    .css_test img {
        position : relative;
        width : 200px;
        margin-top : 10px;
    }
</style>
애니메이션이 끝난후 queue 를 사용해서 얼굴 표정을 원래대로 바꿔봅니다.<br><br>
<button type="button" onclick="j_test()">눌러보세용</button>

<div class="css_test">
    <div></div>
    <img src="http://biketago.com/img/etc/huk1.gif" />
</div>
<br><br><br>
<script type="text/javascript">
    function j_test(){
        // 보기 편하게 줄내려서 코딩
        $( '.css_test img:not(:animated)' ) // 애니메이션 되지않는 이미지만 찾기 (중복실행방지)
        .attr('src', 'http://biketago.com/img/etc/huk2.gif')
        .css({top:0, left:0})
        .animate({
            top:'+=100', left:'+=100'
        }, 500)
        .animate({
            top:'+=100', left:'-=100'
        }, 500)
        .animate({
            top:'-=100', left:'-=100'
        }, 500)
        .animate({
            top:'-=100', left:'+=100'
        }, 500)
        .queue(function(){
            // queue 를 사용해서 모든 애니메이션이 끝났을때 얼굴의 표정을 바꿔줌
            // queue 를 사용해서 뭔가 했다면 dequeue 를 사용해서 마감처리 해야함.
            // 이 예제에서 dequeue 하지 않으면 버튼을 눌러도 다시 실행되지 않게됨
            // dequeue 로 마감을 하지 않았기 때문에 애니메이션은 실행중인 상태로 남게됨
            // 그래서 img:not(:animated) 이 셀렉터에 해당하지 않게되어 실행이 안됨.
            $(this).attr('src', 'http://biketago.com/img/etc/huk1.gif').dequeue();
        })
    }

    function j_test2(){ // queue 의 갯수를 보기위한 함수
        var n = $( '.css_test img' ).queue('fx'); // queue 의 기본 이름은 fx 입니다. (지정하지 않은 경우)
        $('.css_test div').html('현재 예약의 갯수 : <b>' + n.length + '</b>');
    }
    setInterval(j_test2, 100);
</script>
관련 CSS
jQuery

- queue 메서드는 좀 복잡하기도 하고 어렵기도 하지만 그렇게 많이 쓰지도(?) 않는 메서드 입니다.
- 위 예제에서 j_test 함수에 animate 메서드 4개와 queue 1개가 사용되었습니다.
- 함수의 애니메이션은 순차적으로 실행됩니다. 그리고 마지막으로 queue 에 있는 얼굴 바꾸기가 실행되죠.
- 애니메이션이 동시에 실행되지 않는점에 주목해야 합니다.
- 즉 4개의 애니메이션은 순차적으로 실행되며 실행이 예약되는 상태가 됩니다.
- queue 에 실행하고 싶은 코딩을 하면 그것역시 같이 예약됩니다.

이 예제에서는 아래처럼 했습니다.
.queue( function(){
        $( this ).
attr( 'src', 'http://biketago.com/img/etc/huk1.gif' ).dequeue();
}
)
- queue 사용후에 dequeue 를 반드시 해줘서 마감처리를 해주어야 합니다.

복잡하죠.. 다른 예제로 더 비교해 보겠습니다.

예제 2
dequeue 메서드 사용을 안한다면?
보기
dequeue 를 하지 않는다면? (얼굴이동 종료후 다시 버튼을 눌러보세요)




소스
<style type="text/css">
    .css_test {
        text-align : center;
        height : 300px;
    }
    .css_test img {
        position : relative;
        width : 200px;
        margin-top : 10px;
    }
</style>
dequeue 를 하지 않는다면? (얼굴이동 종료후 다시 버튼을 눌러보세요)<br><br>
<button type="button" onclick="j_test()">눌러보세용</button>

<div class="css_test">
    <div></div>
    <img src="http://biketago.com/img/etc/huk1.gif" />
</div>
<br><br><br>
<script type="text/javascript">
    function j_test(){
        $( '.css_test img:not(:animated)' )
        .attr('src', 'http://biketago.com/img/etc/huk2.gif')
        .css({top:0, left:0})
        .animate({
            top:'+=100', left:'+=100'
        }, 500)
        .animate({
            top:'+=100', left:'-=100'
        }, 500)
        .animate({
            top:'-=100', left:'-=100'
        }, 500)
        .animate({
            top:'-=100', left:'+=100'
        }, 500)
        .queue(function(){
            // 첫번째 예제와 달리 dequeue 를 하지 않음
            $(this).attr('src', 'http://biketago.com/img/etc/huk1.gif');
        })
    }

    function j_test2(){ // queue 의 갯수를 보기위한 함수
        var n = $( '.css_test img' ).queue('fx'); // queue 의 기본 이름은 fx 입니다. (지정하지 않은 경우)
        $('.css_test div').html('현재 예약의 갯수 : <b>' + n.length + '</b>');
    }
    setInterval(j_test2, 100);
</script>
관련 CSS
jQuery

- dequeue 로 마감 처리를 하지않아서 예약이 종료된 상태가 되지않았습니다.
- 즉 아직 애니메이션이 진행중인 상황이 되버린 것이죠. 할일은 다했지만 마감처리가 안되었으니 안끝났다 인 겁니다.
- 그래서 이 예제는 버튼을 눌러도 한번밖에 실행되지 않습니다.

$( '.css_test img:not(:animated)' )  -  애니메이션 되지않는 이미지를 찾으라는 셀렉터에 해당되는게 없기 때문입니다.
- 하지만 예약의 갯수는 올라가네요. (이건 뭐지 ..)
- 제 설명이 정확하지 않을 수 있습니다. 어려워용...

예제 3
queue 메서드와 delay 메서드를 섞어서 만들어 본 예제 (자주 놀라는 얼굴)
보기
queue 와 delay 를 적절히 사용해 보았습니다.




소스
<style type="text/css">
    .css_test {
        text-align : center;
        height : 300px;
    }
    .css_test img {
        position : relative;
        width : 200px;
        margin-top : 10px;
    }
</style>
queue 와 delay 를 적절히 사용해 보았습니다.<br><br>
<button type="button" onclick="j_test()">눌러보세용</button>

<div class="css_test">
    <img src="http://biketago.com/img/etc/huk1.gif" />
</div>
<br><br><br>
<script type="text/javascript">
    function j_test(){

        var q = $( '.css_test img' ).queue('fx');
        if(q.length > 0) return; // 예약이 되어있는 상태면 실행 종료하기

        $( '.css_test img' )
        .css({top:0, left:0})

        .animate({
            top:'+=100', left:'+=100'
        }, 500)
        .queue(function(){
            $(this).attr('src', 'http://biketago.com/img/etc/huk2.gif').dequeue();
        })
        .delay(1000)
        .queue(function(){
            $(this).attr('src', 'http://biketago.com/img/etc/huk1.gif').dequeue();
        })

        .animate({
            top:'+=100', left:'-=100'
        }, 500)
        .queue(function(){
            $(this).attr('src', 'http://biketago.com/img/etc/huk2.gif').dequeue();
        })
        .delay(1000)
        .queue(function(){
            $(this).attr('src', 'http://biketago.com/img/etc/huk1.gif').dequeue();
        })

        .animate({
            top:'-=100', left:'-=100'
        }, 500)
        .queue(function(){
            $(this).attr('src', 'http://biketago.com/img/etc/huk2.gif').dequeue();
        })
        .delay(1000)
        .queue(function(){
            $(this).attr('src', 'http://biketago.com/img/etc/huk1.gif').dequeue();
        })

        .animate({
            top:'-=100', left:'+=100'
        }, 500)
        .queue(function(){
            $(this).attr('src', 'http://biketago.com/img/etc/huk2.gif').dequeue();
        })
        .delay(1000)
        .queue(function(){
            $(this).attr('src', 'http://biketago.com/img/etc/huk1.gif').dequeue();
        })
    }
</script>
관련 CSS
jQuery

- 길어졌지만 사실 단순 반복 코딩입니다.

var q = $( '.css_test  img' ).queue( 'fx' );
if( q.length > 0 ) return;
- 그리고 위처럼 예약이 있다면 종료되도록 체크하는 처리를 했습니다.
- delay 상태에서 버튼을 누르니 예약이 추가되네요. (원하지 않는 작동)
- 이렇게 체크해두면 막을 수 있습니다. queue 의 갯수가 0 보다 크면 종료.

- 제이쿼리에서 애니메이션은 사실 간단한게 아닙니다. 깊이 알면 복잡하고 간단히 쓰면 쉽죠. (간단히 씁시당)

관련 메소드 : .animate() .delay()

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