-
20. JQuery animate를 이용하여 요소에 이벤트 주기 예시 - 1JQuery 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>'JQuery' 카테고리의 다른 글
22. JQuery append를 사용하여 테이블에 값 추가하기 예시 - 1 (0) 2022.09.06 21. JQuery 요소 추가하기 (0) 2022.09.06 19. JQuery 이벤트 객체를 이용하여 animate 응용 (0) 2022.09.02 18. JQuery 요소에 애니메이션 효과 넣기 (0) 2022.09.02 17. JQuery 요소 슬라이드(slide)하기 (0) 2022.09.02