[제이쿼리] 애니메이션/ 효과 메서드 및 적용시키기 : Programming Story

특정 요소의 효과를 적용시키기 위해서는 스타일 (CSS)를 적용시킬 수도 있지만 더 다양하고 역동적인 효과를 위해서는 애니메이션 메서드를 적용시킬 수 있다.

효과 메서드의 기본형태를 알아보면,

$("요소선택").효과메서드 (애니메이션 지속시간,가속도, 함수);

이런식이다. 여기서 지속 시간은 milisecond가 단위이기 때문에 1초 동안 지속시키고 싶다면 1000이라고 적으면 된다. 우리가 생각하는 초에 1000을 곱해주면 된다. 만약 0.5초 동안 지속시키고 싶다면 500을 적으면 된다.

가속도는 두 가지 종류가 있는데, "linear"와 "swing"이 있다.

linear: 일정한 속도로 움직임
swing: 시작과 끝은 느리게, 중간은 빠르게

만약 가속도를 설정해주지 않는다면 swing이 디폴트값으로 들어간다.

효과 중에서 많이 쓰이는 효과는

fadeIn() : 요소를 선명하게 만든다 (투명도 조절)
fadeOut(): 요소를 투명하게 만든다
slideUp() : 요소가 위로 접히며 숨겨진다
slideDown(): 숨겨진 요소가 아래로 펼쳐진다.

정도가 있다.

그러면 효과 중에서 자주 쓰이는 효과를 적용시켜서 실습을 해보자

버튼을 두 개 만들고, 첫 번째 버튼을 누르면 slideUp을 해주면서 첫번째 요소를 가려주고, 다시 한번 눌러주면 다시 요소를 보여주는 기능을 구현할 것이다. 버튼의 글자는 hide first와 show first가 번갈아가면서 나올 예정이다. 즉, 한번 hide가 되었다면 다시 show first라고 버튼의 글자가 바뀌는 식이다.

그리고 두 번째 버튼은 fadeIn()과 fadeOut()을 구현하여 버튼을 한 번 누르면 두번째 요소가 fadeOut되고 다시 누르면 fadeIn 되는 식으로 구현을 해보자.

해당 코드는 다음과 같이 쓸 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 효과와 애니메이션 </title>  
<script src="js/jquery.js"></script>
<script>
$(function( ) {
	$(".btn1").on("click", function( ) {

		if ($(".btn1").text()=="hide first"){
			$(".box").slideUp(500, "swing", function(){
                  $(".btn1").text("show first");
			});
		}
		else if ($(".btn1").text()=="show first"){
			$(".box").slideDown(500, "swing", function(){
                  $(".btn1").text("hide first");
			});
		}
	});

	$(".btn2").on("click", function( ) {
		if ($(".btn2").text()=="fade in"){
			$(".box2").fadeIn(1000, "swing", 
		function( ) {
			
			$(".btn2").text("fade out");
		});
		}
		else if ($(".btn2").text()=="fade out"){
			$(".box2").fadeOut(1000, "swing", 
		function( ) {
			
			$(".btn2").text("fade in");
		});
		}
		
	});

	
});
</script>
<style>
	.content{
		width:400px;
		background-color: #eee;
	}
</style>
</head>
<body>
	<p>
		<button class="btn1">hide first</button>
		<button class="btn2">fade out</button>
	</p>
	
	<div class="box">
		<div class="content">
				This is the first part. If you want to hide this first part, click "hide first".
		</div>
	</div>

	<div class="box2">
		<div class="second">
				This is the second part. If you want to make this fade out, click "fade out".
		</div>
	</div>
</body>
</html>

저장을 해서 Chrome에서 실행을 해 보면,

이미지도 잘 확인되고 동작도 잘 구현되는 것을 알 수 있다.

animate() 메서드

다음으로는 animate() 메서드에 대해 알아보자. animate() 메서드를 사용하여 해당 요소를 이동시키거나, 크기를 변화시키는 등 다양한 효과를 구현할 수 있다.

기본형은

$("요소").animate({스타일 속성}, 시간, 가속도, 함수)

와 같이 쓸 수 있다. 시간, 가속도, 함수는 위 효과메서드에서 소개한 바와 동일하고, 스타일 속성은 애니메이션으로 적용할 스타일 속성을 의미한다.

많이들 marginLeft라는 속성을 animate 메서드와 함께 잘 사용한다.

따라서 또 다른 실습으로 버튼 3가지를 만들고

아래에 있는 컨텐츠가 왼쪽 버튼을 누르면 왼쪽으로 이동, 가운데 버튼을 누르면 가운데 정렬, 오른쪽 버튼을 누르면 오른쪽으로 이동하는 것을 구현해보도록 하겠다. 일정 정도 버튼을 누르면 더 이상 버튼이 작동하지 않도록 제한도 걸어두겠다.

위의 실습을 코드화한 것은 다음과 같다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 효과와 애니메이션 </title>  
<script src="js/jquery.js"></script>
<script>
$(function( ) {
	$(".content").css({marginLeft: "140px"});
	var count=7;
	$(".btn1").on("click", function( ) {
		count--;
		if (count<0){
			count=0;
			return false;
		}
		$(".box").stop().animate({
           marginLeft:"-=20px"
		}, 500);
	});

	$(".btn2").on("click", function( ) {
		count=7;
		$(".box").stop().animate({
           marginLeft:"140px"
		}, 500);
	});

	$(".btn3").on("click", function( ) {
		count++;
		if (count>=14){
			return false;
		}
		$(".box").stop().animate({
           marginLeft:"+=20px"
		}, 500);
	});
	
});
</script>
<style>
	.content{
		width:400px;
		background-color: #eee;
	}
</style>
</head>
<body>
	<p>
		<button class="btn1">move left</button>
		<button class="btn2">move to the center</button>
		<button class="btn3">move right</button>
	</p>
	
	<div class="box">
		<div class="content">
				This part will be moved according to your button click.
		</div>
	</div>

	
</body>
</html>

위 코드에서 볼 수 있지만, 첫 번째 버튼을 누르면 animate({marginLeft:"-=20px"})처럼 점차 해당 컨텐츠가 왼쪽으로 가는 것을 알 수 있다.

가운데 버튼을 누르면 가운데로 버튼이 정렬되고,

오른쪽 버튼을 누르면 컨텐츠가 오른쪽으로 이동하는 것을 알 수 있다.

또한 버튼의 클릭 횟수가 일정 횟수를 넘어가면 컨텐츠가 화면 영역 밖으로 넘어가기 때문에 count라는 숫자로 제한을 걸어두었다.

위 코드도 Chrome에서 확인해보면

위의 그림처럼 예상대로 구현이 되고 작동도 잘 되는 것을 알 수 있다.

stop() 메서드

위의 코드를 잘 보면 stop() 메서드가 사용된 것을 알 수 있다.

stop() 메서드의 사용법을 알아보자

stop() 메서드는 현재 실행 중인 효과를 모두 정지시킬 때 사용된다.

크게 두 가지의 기본형으로 사용이 된다.

$("요소").stop()

이것은 현재 진행 중인 애니메이션만 정지시키는 경우이다. 즉, 애니메이션은 함수가 적용된 순서대로 queue에 저장이 되는데 큐에 대기 중인 애니메이션은 계속해서 실행이 되고 현재 진행 중인 애니메이션만 정지시킨다는 뜻이다.
$("요소").stop(clearQueue, finish)

이것은 clearQueue와 finish 부분에 boolean(true / false) 의 값이 들어간다.
디폴트값은 false인데 각각을 true로 바꾸면 어떤 의미를 갖는지 알아보자.

- clearQueue: 이것이 true면 말 그대로 queue에 대기 중인 애니메이션을 제거한다는 것이다.
- finish: 이것이 true이면 현재 진행 중인 애니메이션을 강제로 종료한다는 뜻이다.

따라서 stop (true, true)라고 써 주면 대기중인 애니메이션과 현재 진행 중인 애니메이션을 강제로 종료하게 된다.

stop () 메서드 이외에도 delay() /queue()/ dequeue() 메서드 처럼 다양한 메서드들이 존재한다.

이를 적절히 활용하면 원하는 효과를 다양하게 구현시킬 수 있다.