jQuery 공작소 : .delay()

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

애니메이션 관련 메소드에 딜레이(잠시멈춤)을 설정합니다

예제 1
간단히 살펴보기 (버튼을 눌러보세요)
보기
소스
<style type="text/css">
    .css_test {
        height : 150px;
    }
    .css_test img {
        position : relative;
    }
</style>

<div class="css_test">
    <img src="//superkts.com/img/css/Crystal_Clear_app_kteatime.png" />
</div>

<script type="text/javascript">

    function j_test(n){
        $('.css_test img').animate({top:'-=200'}).delay(n).animate({top:'+=200'});
    }
    

</script>

<button type="button" onclick="j_test(1000)">여유로운 커피</button>
<button type="button" onclick="j_test(500)">조금 급한 커피</button>
<button type="button" onclick="j_test(100)">바쁜 커피</button>
관련 CSS
jQuery

delay( 숫자 )  -  지정한 숫자 만큼 잠시 대기합니다. 숫자는 1000분의 1초로 지정합니다.
delay
( 1000 ).animate( { top : '+=200' } )  -  1초(1000) 후 애니메이션 메서드가 실행됩니다.
delay( 500 ).animate( { top : '+=200' } )  -  0.5초(500) 후 애니메이션 메서드가 실행됩니다.

참고 메서드 : .animate()

예제 2
시간차 애니메이션 실행
보기
소스
<style type="text/css">
    .css_test {
        height : 350px;
    }
    .css_test img {
        position : relative;
    }
</style>

<div class="css_test">
    <img src="//superkts.com/img/css/Crystal_Clear_action_share.png" />
    <img src="//superkts.com/img/css/Crystal_Clear_app_kteatime.png" />
    <img src="//superkts.com/img/css/Crystal_Clear_app_kteatime.png" />
    <img src="//superkts.com/img/css/Crystal_Clear_app_kteatime.png" />
</div>

<script type="text/javascript">
    function j_test(){
        // 이미지 순서대로 시간차를 두고 애니메이션을 실행합니다
        $('.css_test img:eq(0)').delay(100).animate({top:'+=200'});
        $('.css_test img:eq(1)').delay(200).animate({top:'+=200'});
        $('.css_test img:eq(2)').delay(300).animate({top:'+=200'});
        $('.css_test img:eq(3)').delay(400).animate({top:'+=200'});
    }
</script>

<button type="button" onclick="j_test(1000)">핸드 드랍? 커피</button>
관련 CSS
예제 3
slideUp(), slideDown() 메서드에 적용해 보기
보기
소스
<style type="text/css">
    .css_test {
        height : 350px;
        margin-top : 10px;
    }
    .css_test img {
        position : relative;
        width : 45%;
    }
</style>

<button type="button" onclick="j_test()">시 작 !</button>
<div class="css_test">
    <div>
        <img src="https://t1.daumcdn.net/cfile/tistory/27042F3354D74FB30A" />
        <img src="https://t1.daumcdn.net/cfile/tistory/2227B74F54D7351631" />
    </div>
</div>

<script type="text/javascript">
    function j_test(){
        $('.css_test div').slideUp().delay(1000).slideDown();
    }
</script>
관련 CSS
jQuery

slideUp().delay( 1000 ).slideDown()  -  중간에 끼워넣어서 1초간 멈추도록 합니다.

예제 4
응용해서 이미지 슬라이드 효과 만들어보기 (슬라이더 아닙니다 ^^;)
보기
효과음 : 입으로 찰칵~ 찰칵~
소스
<style type="text/css">
    .css_test {
        height : 420px;
        margin-top : 10px;
        margin : 0 auto;
        overflow : hidden;
        text-align : center;
        width : 600px;
    }
    .css_test div {
        background : #000;
        display : none;
        height : 420px;
        position : absolute;
        width : 600px;
    }
    .css_test img {
        display : none;
        width : 100%;
    }
</style>

<button type="button" onclick="j_test()">눌 러 보 세 용 데 헷</button>
<div class="css_test">
    <div></div>
    <img src="https://t1.daumcdn.net/cfile/tistory/22366638555ABF491B" style="display:inline-block;" />
    <img src="https://t1.daumcdn.net/cfile/tistory/2408473354D74FB606" />
    <img src="https://t1.daumcdn.net/cfile/tistory/25469641555AC5000B" />
    <img src="https://t1.daumcdn.net/cfile/tistory/2525B538555ABF4726" />
    <img src="https://t1.daumcdn.net/cfile/tistory/27165B4854D735151D" />
    <img src="https://t1.daumcdn.net/cfile/tistory/263DDC4C550B9B3C0D" />
    <img src="https://t1.daumcdn.net/cfile/tistory/27165B4854D735151D" />
    <img src="https://t1.daumcdn.net/cfile/tistory/24088C3354D74FB505" />
    <img src="https://t1.daumcdn.net/cfile/tistory/232B204B550B9B3932" />
    <img src="https://t1.daumcdn.net/cfile/tistory/216CB14B550B9B3812" />
</div>
효과음 : 입으로 찰칵~ 찰칵~

<script type="text/javascript">
    function j_test(){
        $('.css_test div').slideDown(100, function(){

            // 보이는 이미지를 제거하고 마지막에 추가시켜줍니다 (맨앞 제거 후 마지막에 복사)
            $('.css_test').append($('.css_test img:visible').remove());
            // 첫번째 이미지를 보이게 만듭니다
            $('.css_test img:first').show();
            // 마지막 이미지는 감춥니다 (마지막 위치에 복사된 이미지는 보이는 상태이기때문)
            $('.css_test img:last').hide();

            // 실행시마다 이미지가 순환하게 됩니다.
            // 맨 마지막 것이 위로 올라오고 하나씩 밑으로 밀어냅니다.

        }).delay(500).slideUp(100);
    }
</script>
관련 CSS
jQuery
- 10개의 이미지가 순차적으로 반복되어 보여지는 예제입니다.

참고 예제 : 다중 예약 애니메이션 완벽히 멈추기
jQuery 홈페이지 .delay() API 문서 : http://api.jquery.com/delay/