delay
원문 링크 
http://api.jquery.com/delay/
개요 : 대기열(queue)에 대기중인 항목의 실행을 타이머를 세팅하여 지연 시킵니다.
- .delay( duration [, queueName] )
- duration 지연될 시간 (단위는 밀리세컨드).
- queueName 큐명(queue name)
jQuery 버젼 1.4 에서, .delay() 는 함수의 실행을 지연 시킬수 있게 되었습니다. 기본적인 effects 함수들이나 사용자 정의 함수들에 대해서 사용할 수 있습니다. 단 대기중인 후속 이벤트만 지연됩니다. 예를 들어, 인자가 없는 형태의 함수 .show() 나 .hide() 들은 지연이 되지 않습니다. Only subsequent events in a queue are delayed; for example this will not delay the no-arguments forms of .show() or .hide() which do not use the effects queue.
시간값은 밀리세컨드 기준입니다. 높은값을 주면 오래 지연되고, 반대는 짧게 지연됩니다. 'fast' 와 'slow' 문자를 지원하는데 각각 200 와 600 밀리세컨드를 의미합니다.
예를 들어보겠습니다. .slideUp() 과 .fadeIn() 사이에 800 밀리세컨드 만큼 지연시키고 싶다면 아래와 같이 작성하면 됩니다.
$('#foo').slideUp(300).delay(800).fadeIn(400);예 제
두개의 div를 숨겼다 나타낼 때, 시간차를 줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div { position: absolute; width: 60px; height: 60px; float: left; }
.first { background-color: #3f3; left: 0;}
.second { background-color: #33f; left: 80px;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><button>Run</button></p>
<div class="first"></div>
<div class="second"></div>
<script>
$("button").click(function() {
$("div.first").slideUp(300).delay(800).fadeIn(400);
$("div.second").slideUp(300).fadeIn(400);
});
</script>
</body>
</html>미리보기
예제를 보니 바로 이해가 됩니다. 다들 그러시죠~~
실행을 지연 시킬 때 사용하면 좋겠습니다만 일반적인 함수들도 다 지연되는지는 테스트 해봐야 겠습니다.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| fadeTo(), 투명도를 조절하기 (0) | 2012.04.16 |
|---|---|
| fadeOut(), 서서히 사라지게 하기 (0) | 2012.04.16 |
| fadeIn(), 서서히 나타나게 하기 (0) | 2012.04.16 |
| dequeue(), 대기열의 다음 함수 실행 (2) | 2012.04.16 |
| clearQueue(), 대기열의 함수를 제거 (0) | 2012.04.16 |
| animate(), 요소를 움직이기 (8) | 2012.03.30 |
| unload(), 페이지에서 벗어날 때 (2) | 2012.03.20 |
| undelegate(), 바인딩 해제하기 (0) | 2012.03.20 |