jQuery 공작소 : .delay()

<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>

<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>

<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/24604B4B550B9B3718" />
        <img src="https://t1.daumcdn.net/cfile/tistory/21385A4C550B9B3D10" />
    </div>
</div>

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

<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/2574603354D74FB429" style="display:inline-block;" />
    <img src="https://t1.daumcdn.net/cfile/tistory/263DDC4C550B9B3C0D" />
    <img src="https://t1.daumcdn.net/cfile/tistory/24242C3D552F50A61B" />
    <img src="https://t1.daumcdn.net/cfile/tistory/21385A4C550B9B3D10" />
    <img src="https://t1.daumcdn.net/cfile/tistory/22063B4854D7351334" />
    <img src="https://t1.daumcdn.net/cfile/tistory/244ED638555ABF4509" />
    <img src="https://t1.daumcdn.net/cfile/tistory/27210A38555ABF4229" />
    <img src="https://t1.daumcdn.net/cfile/tistory/223D2D4C550B9B3B0D" />
    <img src="https://t1.daumcdn.net/cfile/tistory/2275BF38550B92383D" />
    <img src="https://t1.daumcdn.net/cfile/tistory/2730B94D55AC84A92F" />
</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>