• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>jQuery Effect Handling</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
            $("#toggleBtn").on("click", function() {
20
                // id가 "divBox"인 요소를 2초에 걸쳐 올라가면서 사라지거나 내려오면서 나타나게 함.
21
                $("#divBox").slideToggle(2000);
22
            });
23
            $("#stopBtn").on("click", function() {
24
                // id가 "divBox"인 요소에서 실행 중인 모든 이펙트 효과를 즉시 중지시킴.
25
                $("#divBox").stop();
26
            });
27
            $("#finishBtn").on("click", function() {
28
                // id가 "divBox"인 요소에서 실행 중인 모든 이펙트 효과를 즉시 중지시키고, 그 큐까지 모두 제거함.
29
                $("#divBox").finish();
30
            });
31
        });
32
    </script>
33
</head>
34
​
35
<body>
36
​
37
    <h1>이펙트 효과의 정지와 중지</h1>
38
    <p></p>
39
    <button id="toggleBtn">이펙트 효과 시작!</button>
40
    <button id="stopBtn">이펙트 효과 정지!</button>
41
    <button id="finishBtn">이펙트 효과 중지!</button>
42
    <div id="divBox"></div>
43
44
</body>
45
​
46
</html>