dequeue
원문 링크 
http://api.jquery.com/dequeue/
개요 : 일치하는 요소 대기열에 있는 다음 함수를 실행합니다.
- .dequeue( [queueName] )
- queueName 큐명(queue name)
.dequeue() 함수가 호출되면, 큐에서 빠져나와 다음 함수를 실행하게 됩니다. 큐에서 빠져나오려면 이 함수를 반드시 호출해야 합니다.
중요도에 비해서 내용이 조금 짧네요. 저도 잘 몰라서 공부를 좀 했습니다. 아래 예제에서 dequeue() 함수 호출하는 부분을 주석으로 막고 테스트 하시면 다음 진행이 되지 않습니다. 즉, 큐에서 빠져나와 다음 상황으로 진행하고 싶을 때 사용합니다.
예 제
큐안의 내용을 실행하고 빠져나와 다음 내용 실행하기
<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:50px; position:absolute;
height:50px; left:10px; top:30px;
background-color:yellow; }
div.red { background-color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Start</button>
<div></div>
<script>
$("button").click(function () {
$("div").animate({left:'+=200px'}, 2000);
$("div").animate({top:'0px'}, 600);
$("div").queue(function () {
$(this).toggleClass("red");
$(this).dequeue();
});
$("div").animate({left:'10px', top:'30px'}, 700);
});
</script>
</body>
</html>미리보기
반드시 $(this).dequeue() 부분을 주석 처리 하거나 삭제한 후 테스트 해보세요. 이 함수의 중요도를 알수 있습니다.
큐에 대한 공부가 많이 부족해서 좀 어렵네요. 자바스크립트로 이런 공부를 하게 될줄이야. 킁...
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| fadeToggle(), 페이드 인/아웃 토글 (0) | 2012.04.16 |
|---|---|
| fadeTo(), 투명도를 조절하기 (0) | 2012.04.16 |
| fadeOut(), 서서히 사라지게 하기 (0) | 2012.04.16 |
| fadeIn(), 서서히 나타나게 하기 (0) | 2012.04.16 |
| delay(), 대기열의 함수 실행을 지연시키기 (0) | 2012.04.16 |
| clearQueue(), 대기열의 함수를 제거 (0) | 2012.04.16 |
| animate(), 요소를 움직이기 (8) | 2012.03.30 |
| unload(), 페이지에서 벗어날 때 (2) | 2012.03.20 |