• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>jQuery Custom Effect</title>
7
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
8
    <style>
9
        #divBox {
10
            width: 100px;
11
            height: 100px;
12
            background-color: yellow;
13
            border: 5px solid red;
14
            margin-top: 20px;
15
        }
16
    </style>
17
    <script>
18
        $(function() {
19
            $("#animateBtn").on("click", function() {
20
                $("#divBox").animate({
21
                    height: "toggle"    // CSS height 속성값을 미리 정의된 "toggle"로 설정함.
22
                });
23
            });
24
        });
25
    </script>
26
</head>
27
​
28
<body>
29
​
30
    <h1>.animate() 메소드 - 미리 정의된 값 사용</h1>
31
    <button id="animateBtn">이펙트 효과 시작!</button>
32
    <div id="divBox"></div>
33
34
</body>
35
​
36
</html>