• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>jQuery Fade Animation</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 orange;
14
            margin-top: 20px;
15
        }
16
    </style>
17
    <script>
18
        $(function() {
19
            $("#fadeInBtn").on("click", function() {
20
                $("#divBox").fadeIn();  // id가 "divBox"인 요소를 점점 나타나게 함.
21
            });
22
            $("#fadeOutBtn").on("click", function() {
23
                $("#divBox").fadeOut(); // id가 "divBox"인 요소를 점점 사라지게 함.
24
            });
25
        });
26
    </script>
27
</head>
28
​
29
<body>
30
​
31
    <h1>페이드 인과 페이드 아웃</h1>
32
    <button id="fadeInBtn">페이드 인</button>
33
    <button id="fadeOutBtn">페이드 아웃</button>
34
    <div id="divBox"></div>
35
    <p>제이쿼리에서 페이드 효과는 CSS opacity 속성값을 빠르게 변경하여 표현해요!</p>
36
37
</body>
38
​
39
</html>