JQuery

17. JQuery 요소 슬라이드(slide)하기

황민준 2022. 9. 2. 16:45

 

slideUp과 slideDown으로 선택한 요소에 슬라이드 효과를 줄 수 있다.

 

 

slideUp() 요소가 아래서 위로 크기가 작아지며 사라지는 효과
slideDown() 요소가 위에서 아래로 크기가 커지며 나타나는 효과
slideToggle() slideUp되어 있다면 slideDown, slideDown 되어 있다면 slideUp을 하는 효과(스위치)

 

 

* 요소에 슬라이드 효과를 넣은 예시

 

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>문서 제목</title>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <style>
        div {
            padding: 5px;
            border: 1px solid green;
            background-color: yellowgreen;
            text-align: center;
            margin: 2px;
            cursor: pointer;
        }

        .panel {
            padding: 50px 0px;
            display: none;
        }
    </style>
</head>

<body>
    <div id="flip">menu 1</div>
    <div id="p1" class="panel">sub menu</div>

    <div id="flip2">menu 2</div>
    <div id="p2" class="panel">sub menu</div>
</body>
<script>
    //마우스 인/아웃이 계속되면 이벤트가 계속 발생한다.
    // $("#flip").hover(function(){
    //     $(this).next().slideDown("slow");
    // },
    // function(){
    //     $(this).next().slideUp("slow");
    // });

    //문제 : 애니메이션이 끝나기 전에 다음 이벤트가 발생된다.
    //해결방법 : 애니메이션이 끝나기 전에 다른 이벤트가 발생되지 않도록 한다.
    //이벤트를 on/off 를 활용 -> 애니메이션 시작 시 off / 애니메이션 끝나면 on




    function down(){
        $(this).next().slideDown("slow");
    } //선택한 요소의 바로 다음 요소에 slideDown을 실행하는 down이라는 이름의 함수 정의
   
    $("#flip").on("mouseenter", down); //id가 flip인 요소에 mouseenter가 됐을 때, down()함수를 실행하는 이벤트

    $("#flip").on("mouseleave", function () { //id가 flip인 요소에 mouseleave가 됐을 때의 이벤트
        $("#flip").off("mouseenter"); //마우스가 떠나면 위에서 on 했던 mouseenter 이벤트 삭제
        $(this).next().slideUp("slow", function () { //선택한 요소의 바로 다음 요소에 slideUp을 실행하고
            $("#flip").on("mouseenter", down); //현재 mouseenter 이벤트가 없으니까 콜백함수로~
        });
    });


    //기능을 사용하는 곳이 딱 한 군데 => 익명함수가 유리
    //기능을 사용하는 곳이 여러 곳이다 => 일반함수가 유리

    $("#flip2").click(function(){
        $("#p2").slideToggle("fast"); //추천 : 구조가 바뀌어도 동작
        //$(this).next().slideToggle("fast");
    });

</script>

</html>