본문 바로가기
javaScript/jQuery

슬라이드 업/다운 효과 slideUp(), slideDown()

by mooyou 2023. 5. 22.
728x90
300x250
SMALL
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
    $(document).ready(function() {
        var $imgs = $("#target");

        $("#show").on("click",function(){
            $imgs.slideDown(3000, "easeInBounce", function(){
                alert("slideDown 완료");
            })
        })

        $("#hide").on("click", function(){
            $imgs.slideUp(3000, "easeOutBounce", function(){
                alert("slideUp 완료");
            })
        })

    });
</script>

<div id="target">
    <img src="https://placeimg.com/200/120/animals/sepia" />
</div>
<div>
    <button id="show">
        slideDown
    </button>
    <button id="hide">
        slideUp
    </button>
</div>

 

728x90
반응형
LIST

댓글