JavaScript - setTimeout을 이용한 슬라이드 효과

CSS 소스

<style>
    div {
        position: absolute;
        background-color: whitesmoke;
        color: #666;
        padding: 10px;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        width: 600px;
        height: 400px;
        border: 1px solid black;
        border-radius: 5px;

        left: 100px;
        top: -450px;
    }
</style>

 

HTML 소스

<p><a href="#1" onclick="showSlide();">슬라이드</a></p>
<div id="d1">슬라이드 효과</div>

 

스크립트 소스

<script>
    var x = -400;

    function showSlide() {
        x += 10;
        var dEle = document.querySelector("#d1");
        dEle.style.top = x + "px";
        if (x < 100) {
            setTimeout(showSlide, 1);
        } else {
            x = -400;
        }
    }
</script>

 

결과