출처 : https://www.w3schools.com 사이트의 내용을 공부하며 정리하고 있다.

Animate( ) : 일종의 애니메이션 효과라고 생각하면 이해가 쉽다.

글자크기를 조절하는 효과 또는 글자를 화면 내에서 이동시키는 효과도 줄 수 있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({left : '500px'});
    });
});
</script> 
</head>
<body>
 
<button>Start Animation</button>
 
<p>모든 html 요소들은 고정된 위치를 가지고 있고 움직일 수 없다. 위치를 조절하기 위해 CSS 속성  relative, fixed, or absolute 요소를 기억하자.</p>
 
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
 
</body>
</html>
cs

결과 : 버튼을 클릭하면 직사각형이 왼쪽으로부터 500px 만큼 이동한다.


jQuery Animate() 메소드는 여러 속성들을 동시에 조작할 수 있다.

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
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            left: '250px',
            opacity: '0.5',
            height: '150px',
            width: '150px'
        });
    });
});
</script> 
</head>
<body>
 
<button>Start Animation</button>
 
<p>모든 html 요소들은 고정된 위치를 가지고 있고 움직일 수 없다. 위치를 조절하기 위해 CSS 속성  relative, fixed, or absolute 요소를 기억하자.</p>
 
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
 
</body>
</html>
cs

결과 : 왼쪽으로 부터 이동, 투명도 조절, 높이, 너비 조절


jQuery Animate() 메소드는 상대적인 값을 사용할 수 있다. 

+=, -=와 같은 값을 사용하여 이벤트 실행 시마다 연속적으로 값을 조절할 수도 있다.


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
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            left : '+=20px',
            height : '+=30px',
            width : '+=30px'
        });
    });
});
</script> 
</head>
<body>
 
<button>Start Animation</button>
 
<p>모든 html 요소들은 고정된 위치를 가지고 있고 움직일 수 없다. 위치를 조절하기 위해 CSS 속성  relative, fixed, or absolute 요소를 기억하자.</p>
 
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
 
</body>
</html>
 
cs

결과 : 클릭 시마다 left, height, width 값이 계속 증가한다.


jQuery animate -> toggle 속성 사용

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
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            height: 'toggle'
        });
    });
});
</script> 
</head>
<body>
 
<p>Click the button multiple times to toggle the animation.</p>
 
<button>Start Animation</button>
 
<p>모든 html 요소들은 고정된 위치를 가지고 있고 움직일 수 없다. 위치를 조절하기 위해 CSS 속성  relative, fixed, or absolute 요소를 기억하자.</p>
 
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
 
</body>
</html>
 
cs

결과: 클릭에 따라 toggle -> show and hide를 반복한다.

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

'문돌이의 IT > jQuery' 카테고리의 다른 글

jQuery - Set Content and Attributes  (0) 2017.08.12
jQuery Effects 제이쿼리 효과 - callback  (0) 2017.08.11
jQuery Effects 제이쿼리 효과 - sliding  (0) 2017.08.10
jQuery Effects 제이쿼리 효과 - fade  (0) 2017.08.09
jQuery Effects 제이쿼리 효과 - hide and show  (0) 2017.08.08

+ Recent posts

티스토리툴바