• 코드:
​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: 50px;
11
            height: 50px;
12
            background-color: green;
13
            margin-top: 20px;
14
        }
15
    </style>
16
    <script>
17
        $(function() {
18
            $("#divBox").mouseenter( function() {
19
                $(this).stop().animate({
20
                    width: "300px"      // CSS width 속성값을 "300px"로 설정함.
21
                }, 1000, "linear");     // 시간당 속도 함수를 "linear"으로 설정함.
22
            });
23
            $("#divBox").mouseleave( function() {
24
                $(this).stop().animate({
25
                    width: "50px"       // CSS width 속성값을 "50px"로 설정함.
26
                }, 1000, "swing");      // 시간당 속도 함수를 "swing"으로 설정함.
27
            });
28
        });
29
    </script>
30
</head>
31
​
32
<body>
33
​
34
    <h1>.animate() 메소드 - 시간당 속도 함수</h1>
35
    <div id="divBox"></div>
36
37
</body>
38
​
39
</html>