티스토리 뷰

(기초)그래서 뭘 배운거야?/jQuery

JQ-39-효과(slideUp/Down, fadeIn/Out, slideToggle, fadeToggle, fadeTo, hide, show, toggle)

Soheny.P 2021. 10. 14. 15:22
728x90
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/JS/jquery-3.6.0.min.js"></script>
    <style>
        .content {
            width: 600px;
            background-color: #eee;
        }
    </style>

</head>

<body>
    <p>
        <button class="btn1">slideUp</button>
        <button class="btn2">fadeIn</button>
    </p>
    <p>
        <button class="btn3">toggleSlide</button>
        <button class="btn3-1">toggleFade</button>
    </p>
    <p>
        <button class="btn4">fadeTo(0)</button>
        <button class="btn5">fadeTo(1)</button>
    </p>

    <div class="box">
        <div class="content">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur non, autem molestias eius repudiandae
            nesciunt omnis quasi eligendi maxime perferendis explicabo ut dignissimos debitis! Accusamus eos rerum
            consectetur nobis incidunt.
        </div>
    </div>

    <script>
        $(function () {
            // fadeIn버튼 숨겨두기
            $(".btn2").hide();

            // slideUp누르면 box사라지고, fadeIn버튼 등장, slideUp버튼 사라지기
            $(".btn1").on("click", function () {
                $(".box").slideUp(1000, "linear", function () {
                    $(".btn1").hide();
                    $(".btn2").show();
                });
            });

            // fadeIn누르면 box나타나고, fadeIn버튼 사라지기, slideUp버튼 등장
            $(".btn2").on("click", function () {
                $(".box").fadeIn(1000, "swing", function () {
                    $(".btn2").hide();
                    $(".btn1").show();
                });
            });

            // slideToggle
            $(".btn3").on("click", function(){
                $(".box").slideToggle(1000, "linear");
            });

            // fadeToggle 
            $(".btn3-1").on("click", function(){
                $(".box").fadeToggle(1000, "linear");
            });

            // fadeTo("fast", fade정도(소수점가능))
            $(".btn4").on("click",function(){
                $(".box").fadeTo("fast", 0);
            });

            $(".btn5").on("click",function(){
                $(".box").fadeTo("fast", 1);
            });

        });
    </script>
</body>

</html>

728x90
저작자표시 비영리 변경금지 (새창열림)

'(기초)그래서 뭘 배운거야? > jQuery' 카테고리의 다른 글

JQ-40-애니메이션(animate)  (0) 2021.10.14
JQ-38-이벤트(전역동적이벤트리스너 삭제)  (0) 2021.10.14
JQ-37-이벤트(그룹이벤트 delegate() / one())  (0) 2021.10.14
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
글 보관함