JQuery

20. JQuery animate를 이용하여 요소에 이벤트 주기 예시 - 1

황민준 2022. 9. 6. 10:10

 

div 요소에 animate를 사용하여 위로 늘어나는 이벤트를 줄 수 있다.

 

문제점 : 단순히 height를 늘린다면 위가 아니라 위/아래 동시에 늘어나게 된다.

 

해결 방법 :

1) div 의 position 을 absolute로 지정한다.

2) height를 늘림과 동시에 top의 값도 조정함으로써 위로만 늘어나는 효과로 보일 수 있다.

 

초기 div 세팅

 

hover를 이용하여 이벤트를 주었을 때

 

 

* animate와 마우스 hover를 사용한 예시

 

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>문서 제목</title>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <style>
        div {
            position: absolute;
            width: 200px;
            height: 50px;
            top: 200px;
            float: left;
        }

        .first {
            background-color: aqua;
        }

        .second {
            background-color: green;
            left: 220px;
        }

        .third {
            background-color: coral;
            left: 430px;
        }
    </style>
</head>

<body>
    <div class="first"></div>
    <div class="second"></div>
    <div class="third"></div>
</body>
<script>

    $("div").hover(
        function () {
            //$(this).clearQueue();
            $(this).animate({ "height": "200", "top": 50 }, "slow", "swing");
        },
        function () {
            //$(this).clearQueue();
            $(this).animate({ "height": "50", "top": 200 }, "slow", "swing");
        });

</script>

</html>