페이드효과 (fade) .fadeIn() .fadeOut() .fadeToggle()

JQuery

페이드효과 (fade) .fadeIn() .fadeOut() .fadeToggle()

낮햇볕 2022. 3. 11. 10:38

페이드효과

해당요소의 CSSopacity 속성값 빠르게 변경하여 표현

.fadeIn() 선택한 opacity 속성을 높여가며 요소를 나타나게한다

.fadeOut() 선택한 opacity 속성을 높여가며 요소를 사라지게한다

.fadeToggle() fadeIn과 fadeOut번갈아가며 적용한다

밀리초나 "slow" , "fast"등 예약어 전달하여 이펙트효과의 속도조절가능

ex) .fadeIn(4000) .fadeOut("slow") .fadeToggle("fast")

<script src="https://code.jquery.com/jquery3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<body>

<button id="fadein">페이드</button>
    <button id="fadeout">페이드아웃</button>
    <button id="fadetoggle">페이드토글</button> <br><br>
    <span id="fade_p" style="background-color: yellow; padding: 10px;">페이드인아웃입니다</span> <br><br>
    <span id="fade_toggle" style="background-color: yellowgreen; padding: 10px;">페이드토글입니다</span>

<script>

//fadeIn
        $("#fadein").on("click", function () {
            $("#fade_p").fadeIn("fast");
        });

        //fadeOut
        $("#fadeout").on("click", function () {
            $("#fade_p").fadeOut();
        });
        //fadeToggle
        $("#fadetoggle").on("click", function () {
            $("#fade_toggle").fadeToggle();
        });

</script>

</body>