• 코드:
​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
            position: absolute;
13
            background-color: yellow;
14
            border: 5px solid red;
15
            margin-top: 20px;
16
        }
17
    </style>
18
    <script>
19
        $(function() {
20
            $("#animateBtn").on("click", function() {
21
                $("#divBox").animate(       // id가 "divBox"인 요소를
22
                    {
23
                        left: "+=100",      // 오른쪽으로 100픽셀 이동하고,
24
                        opacity: 0.2        // 투명도를 0.2로 변경함.
25
                    }, 500, function() {    // 0.5초에 걸쳐서 이펙트 효과가 진행됨.
26
                        $("#text").html("사용자 정의 이펙트가 실행됐어요!");
27
                    }
28
                );
29
            });
30
        });
31
    </script>
32
</head>
33
​
34
<body>
35
​
36
    <h1>.animate() 메소드</h1>
37
    <button id="animateBtn">이펙트 효과 시작!</button>
38
    <p id="text">이펙트 효과가 모두 끝나면 이 텍스트는 변경될 거에요!</p>
39
    <div id="divBox"></div>
40
41
</body>
42
​
43
</html>