jQuery fadeIn, fadeOut, fadeToggle

fadeIn은 서서히 나타나는 기능을, fadeOut은 서서히 사라지는 기능을, fadeToggle은 두가지의 기능을 동시에 합니다.

사진을 예시로 하겠습니다.

<script>
    $(function(){
        //fadeOut, fadeIn, fadeToggle
        $("#fadeOut").on("click", function(){
            $("#jquery").fadeOut("slow");
        });
        $("#fadeIn").on("click", function(){
            $("#jquery").fadeIn("slow");
        });
        $("#fadeToggle").on("click", function(){
            $("#jquery").fadeToggle(2000);
        });            
    });
</script>
<style>
    div { border: 2px solid black; }
</style>
<body>
    <button id="fadeOut">사라지기(fadeOut)</button>
    <button id="fadeIn">나타나기(fadeIn)</button>
    <button id="fadeToggle">fadeToggle()</button>
    <br>
    <br>
    <div>
        <img id="jquery" src="images/jquery.jpg" alt="jquery">
    </div>
</body>

jquery라는 사진을 이용하여 fadeIn, fadeOut, fadeToggle을 실행해보겠습니다.

아무것도 실행하지 않을 때.

↓실행결과(fadeOut)↓

border만이 남아있고 사진은 사라지게 됩니다. elememt창을 보면,

display가 none으로 되어있는 걸 확인할 수 있습니다.

↓실행결과(fadeIn)↓

다시 사진이 서서히 윤곽을 드러내며 완전한 사진으로 다시 생깁니다.

↓실행결과(fadeToggle 한 번 눌렀을 때)↓

fadeOut과 같이 사진이 사라진 것을 확인 할 수 있습니다. 또한 display: none 상태입니다.

↓실행결과(fadeToggle 두 번 눌렀을 때)↓

fadeIn과 같이 사진이 다시 생긴 것을 확인 할 수 있습니다.

보충설명)

fadein과 fadeout은 소스를 보면 빠르게 혹은 느리게 할 것인지를 설정할 수 있으며 fadetoggle은 밀리세컨드로 설정이 가능합니다.

사라지는 기능만 한다면 fadeout을, 서서히 생기게 하는 기능만 하겠다면 fadein을, 두개의 기능을 한다면 fadetoggle을 설정하면 되겠습니다.

'코딩 > jQuery' 카테고리의 다른 글

jQuery click(), on('click') 차이 (0)	2020.07.03
jQuery change()를 통한 체크박스 체크, 체크해제시 이벤트 발생 (0)	2020.07.02
jQuery setInterval, clearInterval (0)	2020.06.30
JavaScript 실행순서 (0)	2020.06.30
jQuery hover() (0)	2020.06.29