• 코드:
​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
        div {
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
            $("#fadeBtn").on("click", function() {
20
                // id가 "divBox_01"인 요소를 2초에 걸쳐 opacity 속성값을 0.2까지만 변경시킴.
21
                $("#divBox_01").fadeTo(2000, 0.2);
22
                // id가 "divBox_02"인 요소를 2초에 걸쳐 opacity 속성값을 0.5까지만 변경시킴.
23
                $("#divBox_02").fadeTo(2000, 0.5);
24
                // id가 "divBox_03"인 요소를 2초에 걸쳐 opacity 속성값을 0.8까지만 변경시킴.
25
                $("#divBox_03").fadeTo(2000, 0.8);
26
            });
27
        });
28
    </script>
29
</head>
30
​
31
<body>
32
​
33
    <h1>페이드 효과의 투명도 설정</h1>
34
    <button id="fadeBtn">페이드 아웃</button>
35
    <div id="divBox_01"></div>
36
    <div id="divBox_02"></div>
37
    <div id="divBox_03"></div>
38
39
</body>
40
​
41
</html>