[Jquery] fadeIn(), fadeOut() - 페이드 효과 내는 방법

    

 

이번 글에서는 애니메이션 기능인 페이드에 대하여 알아보도록 하겠습니다.

페이드(fade) 관련 메소드는 대표적으로 4가지입니다.

1. fadeIn()

2. fadeOut()

3. fadeToggle()

4. fadeTo()

 

하지만, 이번 글에서는 fadeIn(), fadeOut(), fadeToggle()만 다루어 보겠습니다.

 

---

페이드 인(fade in)과 페이드 아웃(fade out)

.fadeIn() 메소드는 선택자로 정한 요소를 서서히 사라지게 하고, .fadeOut() 메소드는 서서히 나타나게 합니다.

 

아래 예제를 통하여 확인해보도록 하겠습니다.

<script>
    $(function() {
        $("#fadeInBtn").on("click", function() {
            $("#divBox").fadeIn();
        });
        $("#fadeOutBtn").on("click", function() {
            $("#divBox").fadeOut();
        })
    })
</script>

 

출력 결과

 

출력 결과는 사진이기 때문에 서서히 사라지고, 서서히 나타나는 것이 보이지 않네요..

직접 코딩하고 확인해보시는 것을 강력히 추천드립니다.

 

위의 예제처럼 페이드 아웃 효과가 끝나게 되면, 해당 요소는 웹 페이지에서 완전히 사라지게 됩니다.

또한, 사라지거나 나타나는 속도도 설정할 수 있는데요.

인수로 밀리초에 해당하는 숫자나 "slow", "fast" 등의 예약어를 전달하여, 페이드 효과의 속도를 조절할 수도 있습니다.

아래 예제 처럼 메소드의 인수에 적어주시면 됩니다.

<script>
    $(function() {
        $("#fadeInBtn").on("click", function() {
            $("#divBox").fadeIn("slow");
        });
        $("#fadeOutBtn").on("click", function() {
            $("#divBox").fadeOut(2000);
        })
    })
</script>

 

---

fadeToggle() 메소드

선택한 요소가 현재 없는(사라진) 상태라면 fadeIn() 동작을 수행하고,

선택한 요소가 현재 나타나 있는 상태라면 fadeOut() 동작을 수행합니다.

 

아래 예제를 참조하시기 바랍니다.

<script>
    $(function() {
        $("#fadeInBtn").on("click", function() {
            $("#divBox").fadeToggle("slow");
        });
    })
</script>