Library/jQuery 이펙트 효과(페이드/슬라이드/jQuery.fx 객체/animate)

Dexter_- 2018. 10. 25. 15:07

728x90

이펙트 효과(페이드/슬라이드/jQuery.fx 객체/animate)

이펙트(effect) 효과

제이쿼리는 웹 페이지에 이펙츠 효과를 손쉽게 넣을 수 있는 다양한 메소드를 제공한다.

이러한 이펙트 효과는 기본 설정으로 바로 사용할 수도 있고, animate( ) 메소드를 통해 설정을 변경해서 사용할 수도 있다.

요소의 표시와 숨김

.hide( ) 메소드는 선택한 요소를 순간적으로 사라지게 하고, show( ) 메소드는 나타나게 한다.

.hide( ) 메소드를 통해 숨겨진 요소는 CSS display 속성값이 none으로 설정된다.

즉, 이렇게 숨겨진 요소는 더는 웹 페이지의 레이아웃에 영향을 주지 않고 완전히 사라지게 된다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Effects</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
        $(function() {
            $("#showBtn").on("click", function() {
                $("#text").show();    // id가 "text"인 요소를 나타나게 함.
            });
            $("#hideBtn").on("click", function() {
                $("#text").hide();    // id가 "text"인 요소를 숨김.
            });
        });
   </script>
</head>
 
<body>
 
    <h1>요소의 표시와 숨김</h1>
    <button id="showBtn">요소 표시하기!</button>
    <button id="hideBtn">요소 숨기기!</button>
    <p>CSS의 display 속성값이 none으로 설정되기 때문에 웹 페이지의 레이아웃에서 아예 사라져 버려요!</p>
    <p id="text">이 단락을 숨기거나 나타나게 할 거에요!</p>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

요소의 표시와 숨김

CSS의 display 속성값이 none으로 설정되기 때문에 웹 페이지의 레이아웃에서 아예 사라져 버려요!

이 단락을 숨기거나 나타나게 할 거에요!

Tip : CSS의 visibility 속성의 속성값을 hidden으로 설정해도 HTML 요소를 숨길 수 있다.

하지만 이때는 보이지만 않을 뿐 숨겨진 요소는 여전히 웹 페이지의 레이아웃에 영향을 주게 된다.

인수로 밀리초에 해당하는 숫자나 "slow", "fast" 등의 예약어를 전달하여, 이펙트 효과의 속도를 조절할 수도 있다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Effects</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
        $(function() {
            $("#showBtn").on("click", function() {
                $("#text").show(2000);        // id가 "text"인 요소를 2초에 걸쳐 나타나게 함.
            });
            $("#hideBtn").on("click", function() {
                $("#text").hide("fast");    // id가 "text"인 요소를 빠르게 숨김.
            });
        });
   </script>
</head>
 
<body>
 
    <h1>요소의 표시와 숨김 속도 조절</h1>
    <button id="showBtn">요소 표시하기!</button>
    <button id="hideBtn">요소 숨기기!</button>
    <p id="text">이 단락을 숨기거나 나타나게 할 거에요!</p>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

요소의 표시와 숨김 속도 조절

이 단락을 숨기거나 나타나게 할 거에요!

요소의 표시 상태 토글

제이쿼리에서는 선택한 요소의 현재 표시 상태에 따라 다른 동작을 하는 .toggle( ) 메소드를 사용할 수 있다.

선택한 요소가 현재 사라진 상태라면 .show( ) 메소드의 동작을 수행하고, 나타나 있는 상태라면 .hide( ) 메소드의 동작을 수행한다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Effects</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
        $(function() {
            $("#toggleBtn").on("click", function() {
                $("#text").toggle("slow");    // id가 "text"인 요소를 느리게 나타나게 하거나 숨김.
            });
        });
   </script>
</head>
 
<body>
 
    <h1>요소의 표시 상태 토글</h1>
    <button id="toggleBtn">요소 표시 토글</button>
    <p id="text">이 단락을 숨기거나 나타나게 할 거에요!</p>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

요소의 표시 상태 토글

이 단락을 숨기거나 나타나게 할 거에요!

페이드 효과

제이쿼리에서 페이드(fade) 효과는 해당 요소의 CSS opacity 속성값을 빠르게 변경하여 표현한다.

이러한 페이드 효과를 표현하기 위해 사용되는 메소드는 다음과 같다.

.fadeIn( )
.fadeOut( )
.fadeTo( )
fadeToggle

페이드 인(fade in)과 페이드 아웃(fade out)

.fadeIn( ) 메소드는 선택한 요소를 서서히 사라지게 하고, .fadeOut( ) 메소드는 서서히 나타나게 한다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Fade Animation</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        #divBox {
            width: 100px;
            height: 100px;
            background-color: yellow;
            border: 5px solid orange;
            margin-top: 20px;
        }
   </style>
    <script>
        $(function() {
            $("#fadeInBtn").on("click", function() {
                $("#divBox").fadeIn();    // id가 "divBox"인 요소를 점점 나타나게 함.
            });
            $("#fadeOutBtn").on("click", function() {
                $("#divBox").fadeOut();    // id가 "divBox"인 요소를 점점 사라지게 함.
            });
        });
   </script>
</head>
 
<body>
 
    <h1>페이드 인과 페이드 아웃</h1>
    <button id="fadeInBtn">페이드 인</button>
    <button id="fadeOutBtn">페이드 아웃</button>
    <div id="divBox"></div>
    <p>제이쿼리에서 페이드 효과는 CSS opacity 속성값을 빠르게 변경하여 표현해요!</p>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

페이드 인과 페이드 아웃

제이쿼리에서 페이드 효과는 CSS opacity 속성값을 빠르게 변경하여 표현해요!

위의 예제처럼 페이드 아웃 효과가 끝나게 되면, 해당 요소는 웹 페이지의 레이아웃에서 완전히 사라지게 된다.

인수로 밀리초에 해당하는 숫자나 "slow:, "fast"등의 예약어를 전달하여, 페이드 효과의 속도를 조절할 수도 있다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Fade Animation</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        #divBox {
            width: 100px;
            height: 100px;
            background-color: yellow;
            border: 5px solid orange;
            margin-top: 20px;
        }
   </style>
    <script>
        $(function() {
            $("#fadeInBtn").on("click", function() {
                $("#divBox").fadeIn("slow");    // id가 "divBox"인 요소를 느리게 점점 나타나게 함.
            });
            $("#fadeOutBtn").on("click", function() {
                $("#divBox").fadeOut(2000);        // id가 "divBox"인 요소를 2초에 걸쳐 점점 사라지게 함.
            });
        });
   </script>
</head>
 
<body>
 
    <h1>페이드 효과의 속도 조절</h1>
    <button id="fadeInBtn">페이드 인</button>
    <button id="fadeOutBtn">페이드 아웃</button>
    <div id="divBox"></div>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

페이드 효과의 속도 조절

페이드 효과의 토글

제이쿼리에서는 선택한 요소의 현재 표시 상태에 따라 다른 동작을 하는 .fadeToggle( ) 메소드를 사용할 수 있다.

선택한 요소가 현재 사라진 상태라면 .fadeIn( ) 메소드의 동작을 수행하고, 나타나 있는 상태라면 .fadeOut( ) 메소드의 동작을 수행한다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Fade Animation</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        #divBox {
            width: 100px;
            height: 100px;
            background-color: yellow;
            border: 5px solid orange;
            margin-top: 20px;
        }
   </style>
    <script>
        $(function() {
            $("#fadeToggleBtn").on("click", function() {
                // id가 "divBox"인 요소를 1초에 걸쳐 점점 나타나게 하거나 사라지게 함.
                $("#divBox").fadeToggle(1000);
            });
        });
   </script>
</head>
 
<body>
 
    <h1>페이드 효과의 토글</h1>
    <button id="fadeToggleBtn">페이드 효과 토글</button>
    <div id="divBox"></div>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

페이드 효과의 토글

페이드 효과의 투명도 설정

.fadeTo( ) 메소드를 사용하면, 페이드 효과에서 사용하는 최종 opacity 속성값을 직접 설정할 수 있다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Fade Animation</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: yellow;
            border: 5px solid orange;
            margin-top: 20px;
        }
   </style>
    <script>
        $(function() {
            $("#fadeBtn").on("click", function() {
                // id가 "divBox_01"인 요소를 2초에 걸쳐 opacity 속성값을 0.2까지만 변경시킴.
                $("#divBox_01").fadeTo(2000, 0.2);
                // id가 "divBox_02"인 요소를 2초에 걸쳐 opacity 속성값을 0.5까지만 변경시킴.
                $("#divBox_02").fadeTo(2000, 0.5);
                // id가 "divBox_03"인 요소를 2초에 걸쳐 opacity 속성값을 0.8까지만 변경시킴.
                $("#divBox_03").fadeTo(2000, 0.8);
            });
        });
   </script>
</head>
 
<body>
 
    <h1>페이드 효과의 투명도 설정</h1>
    <button id="fadeBtn">페이드 아웃</button>
    <div id="divBox_01"></div>
    <div id="divBox_02"></div>
    <div id="divBox_03"></div>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

페이드 효과의 투명도 설정

페이드 효과와 관련된 메소드

메소드	설명
.fadeIn( )	선택한 요소의 CSS opacity 속성값을 높여가며 요소를 나타나게 함.
.fadeOut( )	선택한 요소의 CSS opacity 속성값을 높여가며 요소를 사라지게 함.
.fadeTo( )	페이드 효과에서 사용하는 opacity 속성값을 직접 설정함.
.fadeToggle( )	선택한 요소에 fadeIn( ) 메소드와 fadeOut( ) 메소드를 번갈아가며 적용함.

슬라이드(slide) 효과

제이쿼리에서 슬라이드(slide) 효과는 해당 요소의 CSS height 속성값을 빠르게 변경하여 표현한다.

이러한 슬라이드 효과를 표현하기 위해 사용하는 메소드는 다음과 같다.

.slideUp( )
.slideDown( )
.slideToggle( )

슬라이드 업(slide up)과 슬라이드 다운(slide down)

.slideUp( ) 메소드는 선택한 요소가 서서히 올라가면서 사라지는 효과를 보여준다.

또한, slideDown( ) 메소드는 선택한 요소가 서서히 내려오면서 나타나는 효과를 보여준다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Slide Animation</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        #divBox {
            width: 100px;
            height: 100px;
            background-color: yellow;
            border: 5px solid green;
            margin-top: 20px;
        }
   </style>
    <script>
        $(function() {
            $("#slideUpBtn").on("click", function() {
                $("#divBox").slideUp();        // id가 "divBox"인 요소를 올라가면서 사라지게 함.
            });
            $("#slideDownBtn").on("click", function() {
                $("#divBox").slideDown();    // id가 "divBox"인 요소를 내려오면서 나타나게 함.
            });
        });
   </script>
</head>
 
<body>
 
    <h1>슬라이드 업과 슬라이드 다운</h1>
    <button id="slideUpBtn">슬라이드 업</button>
    <button id="slideDownBtn">슬라이드 다운</button>
    <div id="divBox"></div>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

슬라이드 업과 슬라이드 다운

인수로 밀리초에 해당하는 숫자나 "slow", "fast" 등의 예약어를 전달하여, 슬라이드 효과의 속도를 조절할 수도 있다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Slide Animation</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        #divBox {
            width: 100px;
            height: 100px;
            background-color: yellow;
            border: 5px solid green;
            margin-top: 20px;
        }
   </style>
    <script>
        $(function() {
            $("#slideUpBtn").on("click", function() {
                $("#divBox").slideUp(500);        // id가 "divBox"인 요소를 0.5초에 걸쳐 올라가면서 사라지게 함.
            });
            $("#slideDownBtn").on("click", function() {
                $("#divBox").slideDown(300);    // id가 "divBox"인 요소를 0.3초에 걸쳐 내려오면서 나타나게 함.
            });
        });
   </script>
</head>
 
<body>
 
    <h1>슬라이드 효과의 속도 조절</h1>
    <button id="slideUpBtn">슬라이드 업</button>
    <button id="slideDownBtn">슬라이드 다운</button>
    <div id="divBox"></div>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

슬라이드 효과의 속도 조절

슬라이드 효과의 토글

제이쿼리에서는 선택한 요소의 현재 표시 상태에 따라 다른 동작을 하는 .slideToggle( ) 메소드를 사용할 수 있다.

선택한 요소가 현재 사라진 상태라면 .slideDown( ) 메소드의 동작을 수행하고, 나타나 있는 상태라면 .slideUp( ) 메소드의 동작을 수행한다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Slide Animation</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        #divBox {
            width: 100px;
            height: 100px;
            background-color: yellow;
            border: 5px solid green;
            margin-top: 20px;
        }
   </style>
    <script>
        $(function() {
            $("#slideToggleBtn").on("click", function() {
                // id가 "divBox"인 요소를 빠르게 올라가면서 사라지거나 내려오면서 나타나게 함.
                $("#divBox").slideToggle("fast");
            });
        });
   </script>
</head>
 
<body>
 
    <h1>슬라이드 효과의 토글</h1>
    <button id="slideToggleBtn">슬라이드 효과 토글</button>
    <div id="divBox"></div>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

슬라이드 효과의 토글

슬라이드 효과와 관련된 메소드

메소드	설명
.slideUp( )	선택한 요소의 CSS height 속성값을 높여가며 요소를 사라지게 함.
.slideDown( )	선택한 요소의 CSS height 속성값을 낮춰가며 요소를 나타나게 함.
.slideToggle( )	선택한 요소에 slideUp( ) 메소드와 slideDown( ) 메소드를 번갈아가며 적용함.

이펙트 효과의 제어

제이쿼리에서는 다음 메소드를 사용하여 사용자가 직접 이펙트 효과를 제어할 수 있다.

.delay( )
.stop( )
.finish( )

이펙트 효과의 지연 설정

.delay( ) 메소드는 실행 중인 큐 안에서 연속적으로 실행되는 이펙트 효과 사이의 지연 시간을 설정한다.

다음 예제는 페이드 아웃 효과와 페이드 인 효과 사이에 1초의 지연시간을 설정하는 예제이다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Effect Handling</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        #divBox {
            width: 100px;
            height: 100px;
            background-color: yellow;
            border: 5px solid red;
            margin-top: 20px;
        }
   </style>
    <script>
        $(function() {
            $("#startBtn").on("click", function() {
                // id가 "divBox"인 요소를 0.5초에 걸쳐 사라지게 하고
                // 1초의 지연시간 뒤에 다시 2초에 걸쳐 나타나게 함.
                $("#divBox").fadeOut(500).delay(1000).fadeIn(2000);
            });
        });
   </script>
</head>
 
<body>
 
    <h1>이펙트 효과의 지연 설정</h1>
    <button id="startBtn">이펙트 효과 시작!</button>
    <div id="divBox"></div>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

이펙트 효과의 지연 설정

이펙트 효과의 중지

제이쿼리에서는 .stop( )메소드와 .finish( ) 메소드를 사용하면 실행 중인 이펙트 효과를 중지시킬 수 있다.

.stop( ) 메소드는 선택한 요소에서 실행 중인 모든 이펙트 효과를 즉시 중지시킨다.

.finish( ) 메소드는 거기에 더해서 선택한 요소가 포함된 큐까지 제거하여 모든 이펙트 효과를 전부 종료시킨다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Effect Handling</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        #divBox {
            width: 100px;
            height: 100px;
            background-color: yellow;
            border: 5px solid red;
            margin-top: 20px;
        }
   </style>
    <script>
        $(function() {
            $("#toggleBtn").on("click", function() {
                // id가 "divBox"인 요소를 2초에 걸쳐 올라가면서 사라지거나 내려오면서 나타나게 함.
                $("#divBox").slideToggle(2000);
            });
            $("#stopBtn").on("click", function() {
                // id가 "divBox"인 요소에서 실행 중인 모든 이펙트 효과를 즉시 중지시킴.
                $("#divBox").stop();
            });
            $("#finishBtn").on("click", function() {
                // id가 "divBox"인 요소에서 실행 중인 모든 이펙트 효과를 즉시 중지시키고, 그 큐까지 모두 제거함.
                $("#divBox").finish();
            });
        });
   </script>
</head>
 
<body>
 
    <h1>이펙트 효과의 정지와 중지</h1>
    <p></p>
    <button id="toggleBtn">이펙트 효과 시작!</button>
    <button id="stopBtn">이펙트 효과 정지!</button>
    <button id="finishBtn">이펙트 효과 중지!</button>
    <div id="divBox"></div>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

이펙트 효과의 정지와 중지

이펙트 효과의 제어와 관련된 메소드

메소드	설명
.delay( )	실행 중인 큐 안에서 연속적으로 실행되는 이펙트 효과 사이의 지연 시간을 설정함.
.stop( )	선택한 요소에서 실행 중인 모든 이펙트 효과를 즉시 중지시킴.
.finish( )	선택한 요소에서 실행 중인 모든 이펙트 효과를 즉시 중지시키고, 선택한 요소가 포함된 큐까지 제거하여 모든 이펙트 효과를 전부 종료시킴.

jQuery.fx 객체

제이쿼리의 jQuery.fx 객체는 이펙트 효과가 구현되는 방법을 제어하는 다양한 프로퍼티를 가지고 있다.

jQuery.fx.speeds
jQuery.fx.interval
jQuery.fx.off

jQuery.fx.speeds 프로퍼티

jQuery.fx 객체의 speeds 프로퍼티는 "slow", "normal", "fast" 값을 가지고 이펙트 효과의 속도를 나타낸다.

제이쿼리에서 제공하는 jQuery.fx.speed 프로퍼티의 기본값은 다음과 같다.

프로퍼티 값	밀리초(milisecond)
fast	200
normal	400
slow	600

이러한 속도의 기본값을 speeds 프로퍼티를 이용하여 변경할 수도 있다.

예제

<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery jQuery.fx</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        #divBox {
            width: 100px;
            height: 100px;
            background-color: yellow;
            border: 5px solid red;
            margin-top: 20px;
        }
   </style>
    <script>
        $(function() {
            $("#toggleBtn").on("click", function() {
                // id가 "divBox"인 요소를 빠르게(0.2초에 걸쳐) 올라가면서 사라지거나 내려오면서 나타나게 함.
                $("#divBox").slideToggle("fast");
            });
            $("#setBtn").on("click", function() {
                // jQuery.fx 객체의 speeds 프로퍼티의 fast의 기본값을 1초로 변경함.
                jQuery.fx.speeds.fast = 1000;
            });
        });
   </script>
</head>
 
<body>
 
    <h1>jQuery.fx.speeds 프로퍼티</h1>
    <button id="toggleBtn">이펙트 효과 토글!</button>
    <button id="setBtn">이펙트 효과 속도 변경!</button>
    <div id="divBox"></div>
    
</body>
 
</html>

Colored by Color Scripter

실행결과 :

jQuery.fx.speeds 프로퍼티

jQuery.fx.interval 프로퍼티

jQuery.fx 객체의 interval 프로퍼티는 이펙트 효과가 보여지는 동안의 초당 프레임 수를 나타낸다.

연속적인 프레임에서의 초당 프레임 수는 13으로 기본 설정되어 있다.

이러한 초당 프레임 수를 interval 프로퍼티를 이용해서 사용 목적에 맞게 변경할 수 있다.

jQuery.fx.off 프로퍼티

jQuery.fx 객체의 off 프로퍼티를 true로 설정하면, 모든 이펙트 효과를 사용할 수 없게 된다.

이렇게 이펙트 효과가 비활성화되면, 이펙트 효과는 실행되지 않으며 이펙트 효과의 마지막 상태로 즉시 변경된다.

off 프로퍼티는 특히 구형 버전의 브라우저를 다룰 때 유용하게 사용될 수 있다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery jQuery.fx</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        #divBox {
            width: 100px;
            height: 100px;
            background-color: yellow;
            border: 5px solid red;
            margin-top: 20px;
        }
   </style>
    <script>
        $(function() {
            $("#toggleBtn").on("click", function() {
                // id가 "divBox"인 요소를 1초에 걸쳐 올라가면서 사라지거나 내려오면서 나타나게 함.
                $("#divBox").slideToggle(1000);
            });
            $("#forbidBtn").on("click", function() {
                jQuery.fx.off = true;    // jQuery.fx 객체의 off 프로퍼티를 true로 설정함.
            });
        });
   </script>
</head>
 
<body>
 
    <h1>jQuery.fx.off 프로퍼티</h1>
    <button id="toggleBtn">이펙트 효과 토글!</button>
    <button id="forbidBtn">이펙트 효과 금지!</button>
    <div id="divBox"></div>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

jQuery.fx.off 프로퍼티

jQuery.fx 객체 프로퍼티

프로퍼티	설명
jQuery.fx.speeds	밀리초에 해당하는 "slow", "fast"등의 값을 가지고 이펙트 효과의 속도를 나타냄.
jQuery.fx.interval	이펙트 효과가 보여지는 동안의 초당 프레임 수를 나타냄.
jQuery.fx.off	모든 이펙트 효과를 사용할 수 없도록 비활성화 시킴.

.animate( ) 메소드

제이쿼리에서는 animate( ) 메소드를 이용하여 사용자가 직접 원하는 이펙트 효과를 정의할 수 있다.

.animate( ) 메소드는 여러 CSS 속성을 이용하여 새로운 이펙트 효과를 만들어 준다.

.animate( ) 메소드의 원형은 다음과 같다.

원형

$(선택자).animate(프로퍼티[,지속시간][,시간당속도함수][,콜백함수]);

프로퍼티 파라미터는 필수이며, 이펙트 효과를 구성할 CSS 속성을 정의한다.

지속 시간은 이펙트 효과가 지속될 시간을 전달한다.

시간당 속도 함수(easing function)는 이펙트 효과의 시간당 속도를 전달한다.

콜백 함수는 이펙트 효과의 동작이 완료된 후에 실행할 함수를 정의한다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Custom Effect</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        #divBox {
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: yellow;
            border: 5px solid red;
            margin-top: 20px;
        }
   </style>
    <script>
        $(function() {
            $("#animateBtn").on("click", function() {
                $("#divBox").animate(        // id가 "divBox"인 요소를
                    {
                        left: "+=100",        // 오른쪽으로 100픽셀 이동하고,
                        opacity: 0.2        // 투명도를 0.2로 변경함.
                    }, 500, function() {    // 0.5초에 걸쳐서 이펙트 효과가 진행됨.
                        $("#text").html("사용자 정의 이펙트가 실행됐어요!");
                    }
                );
            });
        });
   </script>
</head>
 
<body>
 
    <h1>.animate() 메소드</h1>
    <button id="animateBtn">이펙트 효과 시작!</button>
    <p id="text">이펙트 효과가 모두 끝나면 이 텍스트는 변경될 거에요!</p>
    <div id="divBox"></div>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

.animate() 메소드

이펙트 효과가 모두 끝나면 이 텍스트는 변경될 거에요!

.animate( ) 메소드 - 사용할 수 있는 CSS 속성

.animate( ) 메소드는 색(color)에 관한 속성을 제외한 거의 모든 CSS 속성을 사용할 수 있다.

.css( ) 메소드에서는 하이픈(-)으로 연결된 CSS 속성 명과 camelCase 방식으로 바꾼 속성 명을 둘 다 사용할 수 있다.

하지만 .animate( )메소드에서는 camelCase 방식의 속성명만 사용할 수 있다.

.animate( ) 메소드에서 사용할 수 있는 CSS 속성은 다음과 같다.

backgroundPositionX
backgroundPositionY
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
marginWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
minWidth
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent

.animate( ) 메소드 - 미리 정의된 값

.animate( ) 메소드는 CSS 속성값으로 미리 정의된 다음 값을 사용할 수 있다.

show
hide
toggle

예제

$(function() {

$("#animateBtn").on("click", function() {

$("#divBox").animate({

height: "toggle" // CSS height 속성값을 미리 정의된 "toggle"로 설정함.

});

.animate( ) 메소드 - 시간당 속도 함수

.animate( ) 메소드는 시간당 속도 함수(easing function)을 사용하여 이펙트 효과의 시간당 속도를 설정할 수 있다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Custom Effect</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        #divBox {
            width: 50px;
            height: 50px;
            background-color: green;
            margin-top: 20px;
        }
   </style>
    <script>
        $(function() {
            $("#divBox").mouseenter( function() {
                $(this).stop().animate({
                    width: "300px"        // CSS width 속성값을 "300px"로 설정함.
                }, 1000, "linear");        // 시간당 속도 함수를 "linear"으로 설정함.
            });
            $("#divBox").mouseleave( function() {
                $(this).stop().animate({
                    width: "50px"        // CSS width 속성값을 "50px"로 설정함.
                }, 1000, "swing");        // 시간당 속도 함수를 "swing"으로 설정함.
            });
        });
   </script>
</head>
 
<body>
 
    <h1>.animate() 메소드 - 시간당 속도 함수</h1>
    <div id="divBox"></div>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

.animate() 메소드 - 시간당 속도 함수

728x90

저작자표시 비영리 변경금지

'Library > jQuery' 카테고리의 다른 글

유틸리티 메소드 (0)	2018.10.25
Ajax와의 연동 (0)	2018.10.25
이벤트 처리 (0)	2018.10.25
스타일 설정(프로퍼티/클래스) (0)	2018.10.25
요소의 영역(크기/위치) (0)	2018.10.24

Embedded Software Embedded Software

요소의 표시와 숨김

요소의 표시와 숨김 속도 조절

요소의 표시 상태 토글

페이드 인과 페이드 아웃

페이드 효과의 속도 조절

페이드 효과의 토글

페이드 효과의 투명도 설정

슬라이드 업과 슬라이드 다운

슬라이드 효과의 속도 조절

슬라이드 효과의 토글

이펙트 효과의 지연 설정

이펙트 효과의 정지와 중지

jQuery.fx.speeds 프로퍼티

jQuery.fx.off 프로퍼티

.animate() 메소드

.animate() 메소드 - 시간당 속도 함수

'Library > jQuery' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바