jQuery 공작소 : .queue()
queue 메소드는 animate 메소드 사이에서 지정한 작업을 수행합니다.
.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="//superkts.com/img/huk1.gif" />
</div>
<br><br><br>
<script type="text/javascript">
function j_test(){
// 보기 편하게 줄내려서 코딩
$( '.css_test img:not(:animated)' ) // 애니메이션 되지않는 이미지만 찾기 (중복실행방지)
.attr('src', '//superkts.com/img/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', '//superkts.com/img/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>
- queue 메서드는 좀 복잡하기도 하고 어렵기도 하지만 그렇게 많이 쓰지도(?) 않는 메서드 입니다.
- 위 예제에서 j_test 함수에 animate 메서드 4개와 queue 1개가 사용되었습니다.
- 함수의 애니메이션은 순차적으로 실행됩니다. 그리고 마지막으로 queue 에 있는 얼굴 바꾸기가 실행되죠.
- 애니메이션이 동시에 실행되지 않는점에 주목해야 합니다.
- 즉 4개의 애니메이션은 순차적으로 실행되며 실행이 예약되는 상태가 됩니다.
- queue 에 실행하고 싶은 코딩을 하면 그것역시 같이 예약됩니다.
이 예제에서는 아래처럼 했습니다.
.queue( function(){
$( this ).attr( 'src', '//superkts.com/img/huk1.gif' ).dequeue();
} )
- queue 사용후에 dequeue 를 반드시 해줘서 마감처리를 해주어야 합니다.
복잡하죠.. 다른 예제로 더 비교해 보겠습니다.
.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="//superkts.com/img/huk1.gif" />
</div>
<br><br><br>
<script type="text/javascript">
function j_test(){
$( '.css_test img:not(:animated)' )
.attr('src', '//superkts.com/img/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', '//superkts.com/img/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>
- dequeue 로 마감 처리를 하지않아서 예약이 종료된 상태가 되지않았습니다.
- 즉 아직 애니메이션이 진행중인 상황이 되버린 것이죠. 할일은 다했지만 마감처리가 안되었으니 안끝났다 인 겁니다.
- 그래서 이 예제는 버튼을 눌러도 한번밖에 실행되지 않습니다.
$( '.css_test img:not(:animated)' ) - 애니메이션 되지않는 이미지를 찾으라는 셀렉터에 해당되는게 없기 때문입니다.
- 하지만 예약의 갯수는 올라가네요. (이건 뭐지 ..)
- 제 설명이 정확하지 않을 수 있습니다. 어려워용...
.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="//superkts.com/img/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', '//superkts.com/img/huk2.gif').dequeue();
})
.delay(1000)
.queue(function(){
$(this).attr('src', '//superkts.com/img/huk1.gif').dequeue();
})
.animate({
top:'+=100', left:'-=100'
}, 500)
.queue(function(){
$(this).attr('src', '//superkts.com/img/huk2.gif').dequeue();
})
.delay(1000)
.queue(function(){
$(this).attr('src', '//superkts.com/img/huk1.gif').dequeue();
})
.animate({
top:'-=100', left:'-=100'
}, 500)
.queue(function(){
$(this).attr('src', '//superkts.com/img/huk2.gif').dequeue();
})
.delay(1000)
.queue(function(){
$(this).attr('src', '//superkts.com/img/huk1.gif').dequeue();
})
.animate({
top:'-=100', left:'+=100'
}, 500)
.queue(function(){
$(this).attr('src', '//superkts.com/img/huk2.gif').dequeue();
})
.delay(1000)
.queue(function(){
$(this).attr('src', '//superkts.com/img/huk1.gif').dequeue();
})
}
</script>
- 길어졌지만 사실 단순 반복 코딩입니다.
var q = $( '.css_test img' ).queue( 'fx' );
if( q.length > 0 ) return;
- 그리고 위처럼 예약이 있다면 종료되도록 체크하는 처리를 했습니다.
- delay 상태에서 버튼을 누르니 예약이 추가되네요. (원하지 않는 작동)
- 이렇게 체크해두면 막을 수 있습니다. queue 의 갯수가 0 보다 크면 종료.
- 제이쿼리에서 애니메이션은 사실 간단한게 아닙니다. 깊이 알면 복잡하고 간단히 쓰면 쉽죠. (간단히 씁시당)
관련 메소드 : .animate() .delay()