코드:
결과보기 »
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>jQuery Custom Effect</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <style> #divBox { width: 100px; height: 100px; background-color: yellow; border: 5px solid red; margin-top: 20px; } </style> <script> $(function() { $("#animateBtn").on("click", function() { $("#divBox").animate({ height: "toggle" // CSS height 속성값을 미리 정의된 "toggle"로 설정함. }); }); }); </script> </head> <body> <h1>.animate() 메소드 - 미리 정의된 값 사용</h1> <button id="animateBtn">이펙트 효과 시작!</button> <div id="divBox"></div> </body> </html>