본문 바로가기
javaScript/jQuery

fadeIn fadeOut 서서히 나타나고 사라지는 효과 +ease

by mooyou 2023. 5. 20.
728x90
300x250

jQuery의 fadeIn fadeOut 메서드를 이용해서 서서히 사라지고 나타나는 효과 만들기

단, 애니메이션 시간은 3초이고 ease효과 완료후 alert창 띄우기

<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.fadeIn(3000, "easeInQuint", function(){
                alert("fadeIn 완료");
            })
        })

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

    });
</script>

<div id="target">
    <img src="https://placeimg.com/200/120/animals/sepia" />
</div>
<div>
    <button id="show">
        fadeIn
    </button>
    <button id="hide">
        fadeOut
    </button>
</div>
728x90
반응형

댓글