** 이번 강좌에서는 제이쿼리의 animate() 메서드에 대해서 알아보도록 하겠습니다.
- 우선 animate() 메서드는 사용자 지정 애니메이션을 만들 수 있습니다.
- 하지만 위와 같이만 설명하며 [ 아~ 움직이는 명령을 주는구나? ]라고 받아들일 수 있습니다.
- 실제 animate() 메서드는 CSS의 변화에 시간차를 주는 메서드입니다.
- CSS속성의 transition 과 비슷한 느낌을 받죠? 비슷해도 명령을 디테일하게 줄 수 있다는 점이 조금 다릅니다.
- 그럼 자세한 내용들은 아래에서 정리하면서 보도록 하겠습니다.
1. animate()의 기본문법
## 기본문법
animate({CSS속성정의},시간,콜백함수);- 기본적인 매개변수는 위에 보이는 대로 CSS속성, 시간, 콜백함수가 있습니다.
- CSS속성정의는 속성명과 값으로 표시해야하는 쌍으로 된 문법을 써야 하므로 { }인 코드블록 내부에 담습니다.
- 시간은 [ fast ], [ slow ]라는 속도키워드를 사용할 수도 있고, 밀리초를 사용한 숫자만 작성할 수도 있습니다.
- 마지막으로 콜백함수는 function(){ } 을 의미하는데, animate() 메서드가 발생된 후 주고 싶은 명령을 담습니다.
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - 시각효과메서드</title>
<style>
div{
position: relative;
width: 100px; height: 100px;
background-color: orange;
}
</style>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$('button').click(function(){
$('div').animate({
left: 300,
top: 300
},'slow');
});
});
</script>
</head>
<body>
<button>이동</button>
<hr>
<div></div>
</body>
</html>- 버튼을 클릭하면 <div> 태그를 왼쪽에서 300px, 위쪽에서 300px이동되게 처리했습니다.
- 이때 주의해야할 사항은 CSS에서 position 속성값을 반드시 변경해야 합니다.
- position의 기본값은 [ static ]인데 이건 자기 위치에 고정되어 움직이지 못한다는 뜻입니다.
그래서 [ relative ], [ absolute ], [ fixed ]로 변경해야 이동시킬 수 있습니다.
## 결과 보기
- 버튼클릭 시 이동되는 것이 잘 확인됩니다.
2. animate() 메서드 콜백함수
- 콜백함수에는 animate() 메서드가 일어난 후 주고 싶은 명령을 콜백함수에 담습니다.
## 코드보기
- 위와 같은 움직임을 주고 다 끝나면 배경색을 빨간색으로 변경하게 처리했습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - 시각효과메서드</title>
<style>
div{
position: relative;
width: 100px; height: 100px;
background-color: orange;
}
</style>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$('button').click(function(){
$('div').animate({
left: 300,
top: 300
},'slow',function(){
$(this).css('backgroundColor','red');
});
});
});
</script>
</head>
<body>
<button>이동</button>
<hr>
<div></div>
</body>
</html>
## 결과 보기
- 이동이 완료된 후 배경색이 빨간색으로 변경되는 것을 확인할 수 있습니다.
3. easing 플러그인 사용
- 기본적으로 제이쿼리의 easing(속도감)은 [ swing ]으로 되어 있습니다.
- 별도의 플러그인이 없다면 [ swing ]과 [ linear ] 밖에 사용할 수 없습니다.
- 보면 앞의 그림이 균등 속도를 갖는 [ linear ]입니다. 균등한 속도라 약간 유령이나 귀신이 부유유~ 움직이는 느낌입니다.
- 뒤의 그림은 S자 곡선인데, 보통 CSS에서 말하는 ease가 [ swing ]입니다. 처음엔 느리다가 빨라지다, 빠르고 느려지는 느낌입니다. 약간 바이킹 타는 느낌이라고 보시면 비슷하겠습니다.
- 하지만 별도의 플러그인을 사용하면 여러가지의 easing효과를 줄 수 있습니다.
https://gsgd.co.uk/sandbox/jquery/easing/
jQuery Easing Plugin
Please note, the easing function names changed in version 1.2. Example Click on any of the yellow headers to see the default easing method in action (I've set as easeOutBounce for the demo, just because it's obviously different). All done with a straight a
gsgd.co.uk
- 오픈소스라서 일단은 블로그에 첨부하였으나, 되도록 해당 사이트에서 다운받으시길 권장합니다.
## html의 <head>의 자손으로 붙이기
<head>
<meta charset="UTF-8">
<title>제이쿼리 - 시각효과메서드</title>
<script src="jquery-1.12.4.min.js"></script>
<script src="jquery.easing.1.3.js"></script>
</head>
## easing 문법
animate({CSS속성정의},시간,이징,콜백함수);- easing은 생략은 가능하지만, 붙일때는 시간과 콜백함수 사이에 작성하면 됩니다.
- easing에 사용되는 속도감의 이름은 첨부한 [ jquery.easing.1.3.js ] 문서를 열고 찾아서 복사해서 붙여넣으면 됩니다.
## 코드보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - 시각효과메서드</title>
<style>
div{
position: relative;
width: 100px; height: 100px;
background-color: orange;
}
</style>
<script src="jquery-1.12.4.min.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script>
$(document).ready(function(){
$('div').eq(0).animate({left: 500},'slow','easeInElastic');
$('div').eq(1).animate({left: 500},'slow','easeInOutBack');
$('div').eq(2).animate({left: 500},'slow','easeInOutSine');
});
</script>
</head>
<body>
<div></div>
<hr>
<div></div>
<hr>
<div></div>
</body>
</html>- 모든 <div> 태그에 animate() 메서드로 바로 왼쪽에서 500px만큼 이동하게 처리했습니다.
- 첫번째 이징효과는 [ easeInOutElastic ]로 처리했습니다.
- 두번째 이징효과는 [ easeInOutBack ]로 처리했습니다.
- 세번째 이징효과는 [ easeInOutSine ]로 처리했습니다.
## 결과 보기
- 이동되는 시간은 같은데, 속도감(easing)때문에 도착하는 것이 달라보입니다.
- 이것을 easing효과라고 합니다.
4. delay() 메서드
- delay() 메서드는 시각효과메서드나 animate() 메서드를 지연시키고자 할 때 사용합니다.
## 문법
$('문서객체선택').delay(시간).animate();- 시간에는 밀리초 단위를 작성하면 됩니다.
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - 시각효과메서드</title>
<style>
div{
position: relative;
width: 100px; height: 100px;
background-color: orange;
}
</style>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$('div').eq(0).delay(0).animate({left: 500},1000);
$('div').eq(1).delay(300).animate({left: 500},1000);
$('div').eq(2).delay(600).animate({left: 500},1000);
});
</script>
</head>
<body>
<div></div>
<hr>
<div></div>
<hr>
<div></div>
</body>
</html>- 첫번째 <div> 태그는 지연시간은 0초로 처리했습니다.
- 두번째 <div> 태그는 지연시간은 0.3초로 처리했습니다.
- 세번째 <div> 태그는 지연시간은 0.6초로 처리했습니다.
## 결과 보기
- 첫번째 것은 지연되지 않고 바로 이동하는데, 다음 것들은 시간차를 두고 이동하는 것을 확인할 수 있습니다.
5. animate() - 상대값 사용
- 문법에서 CSS속성 값을 작성하면 보통 절대적으로 처리됩니다.
## 절대값 예시
$('div').animate({
left: 500
},'fast');- 위와 같은 코드는 <div> 태그를 왼쪽을 기준으로 500px만큼 이동하라는 뜻입니다. 절대적으로 500px이 이동되는 거죠.
- 근데 복합연산자인 [ += ]와 [ -= ]를 사용해 상대적으로 이동될 수 있습니다.
## 상대값 예시
$('div').animate({
left: '+=100'
},'fast');- 복합대입연산자를 값에 사용하면 문자열로 받아들어야 해서 따옴표 내에 적습니다.
- 이것은 현재 위치에서 100씩 상대적 이동하라는 뜻입니다.
- 어떤 결과가 되는지 아래 코드로 자세히 보도록 하겠습니다.
## 코드 예시
- 첫번째 박스는 클릭하면 절대적 위치로 500px만큼 이동하라고 처리합니다.
- 두번째 박스는 클릭하면 현재 위치에서 상대적으로 100px이동하라고 처리하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - 시각효과메서드</title>
<style>
div{
position: relative;
width: 100px; height: 100px;
background-color: orange;
}
</style>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$('div').first().click(function(){
$(this).animate({
left: 500
},'slow');
});
$('div').last().click(function(){
$(this).animate({
left: '+=100'
},'slow');
});
});
</script>
</head>
<body>
<div></div>
<hr>
<div></div>
</body>
</html>- 이때 위에서 사용한 first() 라는 메서드는 선택된 문서객체 중 첫번째로 배열된 객체를 재선택하는 메서드입니다.
- last() 라는 메서드는 선택된 문서객체 중 마지막으로 배열된 객체를 재선택하는 메서드입니다.
- 첫번째 <div> 태그에는 CSS매개변수를 [ left: 500 ]으로 주었고, 마지막은 [ left: '+=100' ]을 준 것을 잘 확인해보세요.
## 결과 보기
- 첫번째 박스는 한번 누르면 500px이동하지만, 그후엔 눌러도 이동되지 않습니다. 벌써 절대적 위치에 가있기 때문이죠.
- 두번째 박스는 클릭 시 계속 100px씩 이동되는 것을 확인할 수 있습니다.
6. animate() - 미리 정의된 값으로 사용
- height 속성과 같은 경우는 값에 [ 'show' ], [ 'hide' ], [ 'toggle' ]을 줘서 시각효과메서드처럼도 쓸 수 있습니다.
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - 시각효과메서드</title>
<style>
div{
position: relative;
width: 100px; height: 100px;
background-color: orange;
}
</style>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$('button').click(function(){
$('div').animate({
height: 'toggle'
},'slow');
});
});
</script>
</head>
<body>
<button>show/hide</button>
<hr>
<div></div>
</body>
</html>
## 결과 보기
- 버튼을 클릭하면 toggle() 메서드처럼 실행이 됩니다.
7. animate() - Queue 기능(대기열기능)
- 컴퓨터 용어에는 Queue라는 용어가 있습니다. 간단하게 말하면 선입선출(FIFO : First In First Out)입니다.
- 즉, 먼저 쓴 코드 먼저 실행하고, 나중에 쓴 코드를 나중에 실행하는 것을 의미합니다.
- 원래 영어로는 무언가(버스같은)를 기다리는 줄을 의미하는 것죠. 우리가 버스탈려고 줄을 섰는데 누가 새치기 하면 짜증나겠죠?
- 컴퓨터 코드도 마찬가지입니다. 특별한 제어문(새치기 같은)이 있지 않고서는 대부분 FIFO방식으로 컴퓨터언어는 진행됩니다.
- 하지만 시각효과메서드나 animate() 메서드는 시간차가 있는 명령입니다. 그래서 뒤의 명령보다는 먼저 실행되는 것이 맞지만 그 시간을 다른 명령이 다 기다리지는 않습니다.
- 무슨 이야기인지 아래 코드로 볼게요.
## animate와 css메서드 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - 시각효과메서드</title>
<style>
div{
position: relative;
width: 100px; height: 100px;
background-color: orange;
}
</style>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$('button').click(function(){
$('div').animate({
left: 500
},2000);
$('div').css('backgroundColor','navy');
});
});
</script>
</head>
<body>
<button>GO!</button>
<hr>
<div></div>
</body>
</html>- 버튼을 클릭하면 우선적으로 animate() 메서드를 통해 500px만큼 이동할건데, 시간이 2초나 걸립니다.
- 그 다음 명령은 css() 메서드로 배경색을 남색으로 변경시켰습니다.
## animate와 css메서드 결과 보기
- 보면 이동되는 것이 아직 끝나지 않았는데 박스의 배경색이 바뀌는 것이 보이죠?
- 물론 명령은 이동되는 것을 먼저 받은 것은 맞습니다. 하지만 이동되는 2초를 다 기다린 후 배경색이 바뀌지는 않습니다.
- 이동되자마자 그 다음 명령인 배경색 바뀌는 것이 실행되서 초반부터 배경색이 바뀝니다.
- 하지만 animate() 메서드끼리라면 Queue 즉, 대기해줍니다. 위의 animate명령이 다 끝나야 다음 명령을 실행해줍니다.
## Queue 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - 시각효과메서드</title>
<style>
div{
position: relative;
width: 100px; height: 100px;
background-color: orange;
}
</style>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$('button').click(function(){
$('div').animate({
left: 500
},1000);
$('div').animate({
top: 500
},1000);
$('div').animate({
left: 0
},1000);
$('div').animate({
top: 0
},1000);
});
});
</script>
</head>
<body>
<button>GO!</button>
<hr>
<div></div>
</body>
</html>- 버튼을 클릭하면 처음에는 왼쪽에서 500px이동되고, 그 다음에 위에서 500px이동, 그다음에 다시 0으로 돌아가게 순서대로 처리했습니다.
## Queue 결과 보기
- 보면 한 animate() 씩 1초씩 처리했는데 그 1초를 다 기다린 후 명령이 들어가는 것을 확인할 수 있습니다.
8. stop() 메서드
- stop() 메서드는 시각효과메서드와 animate() 메서드를 중지시키는 메서드입니다.
## 문법
$('문서객체선택').stop(큐제거,최종형태);- 첫번째 매개변수는 대기 중인 애니메이션 queue도 지울지 여부를 결정합니다. 기본값은 false입니다.
- 두번째 매개변수는 제자리에서 멈출지, 효과가 지정한 마지막 형태로 멈출지를 지정합니다. 기본값은 false로 제자리에서 멈춥니다.
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - 시각효과메서드</title>
<style>
div{
position: relative;
width: 100px; height: 100px;
background-color: orange;
}
</style>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$('div').animate({
left: 500
},5000);
$('button').click(function(){
$('div').stop();
});
});
</script>
</head>
<body>
<button>stop!</button>
<hr>
<div></div>
</body>
</html>- <div> 태그는 처음부터 500px이동을 5초동안 천천히 하게 처리했습니다.
- 그리고 버튼을 클릭하면 멈추게 처리해볼게요.
## 결과 보기
- 버튼을 클릭하자 박스가 바로 멈추는 것을 확인할 수 있습니다.
- 매개변수를 지정하지 않아서 제자리에 멈추는 것도 확인이 됩니다.
'웹언어 > jQuery' 카테고리의 다른 글
| [jQuery강좌] 15강 폼관련 change와 submit이벤트 (0) | 2022.08.29 |
|---|---|
| [jQuery강좌] 14강 $(window)객체 이벤트와 메서드 (0) | 2022.08.26 |
| [jQuery강좌] 12강 시각효과메서드 - 오쌤의 니가스터디 (0) | 2022.08.22 |
| [jQuery강좌] 11강 제이쿼리 이벤트 관련 메서드 - 오쌤의 니가스터디 (0) | 2022.08.10 |
| [jQuery강좌] 10강 문서객체 영역 메서드 - 오쌤의 니가스터디 (0) | 2022.08.10 |
