animate 메서드

animate 메서드는 다양한 CSS 속성에 대한 애니메이션 효과를 생성할 수 있게 해줍니다. 유일한 필수 매개변수는 css 메서드에 전달하는 것과 유사한 CSS 속성이 담긴 객체입니다. 비숫자 값을 가지거나 여러 값을 가지는 많은 속성들은 jQuery의 기본 기능으로 애니메이션화할 수 없습니다(예: background-color). 또한 약식 CSS 속성명이 항상 지원되는 것은 아닙니다, 예를 들어 font 대신 fontSize 또는 font-size를 사용해야 합니다. 값 앞에 '+=' 또는 '-='를 붙일 수 있으며, 이 경우 지정된 값이 속성의 현재 값에 더해지거나 빠집니다. 또한 숫자 값 대신 show, hide 또는 toggle를 넣을 수 있습니다. animate를 포함한 모든 jQuery 효과는 설정 jQuery.fx.off = true를 사용하여 지속 시간을 0으로 설정함으로써 전역적으로 비활성화할 수 있습니다.

문법

애니메이션의 첫 번째 매개변수는 키: 값 형식의 CSS 속성과 그 값들이 담긴 객체로, 애니메이션화하려는 대상입니다. 나머지 매개변수는 선택사항으로 간주됩니다. 두 번째 매개변수는 애니메이션 지속 시간을 밀리초 단위로 지정하며, 기본값은 400ms입니다. 세 번째 매개변수는 전환을 위한 이징 함수입니다 (기본값은 swing). 네 번째 매개변수는 콜백 함수로, 애니메이션 실행이 완료된 후 시작됩니다:

.animate(properties, [duration ], [easing function ], [callback function ]);

시간은 밀리초뿐만 아니라 키워드 slow (600ms) 및 fast (200ms)로도 지정할 수 있습니다. 값이 클수록 애니메이션이 느려집니다. 두 번째 매개변수로 키: 값 쌍을 포함하는 JavaScript 객체 형태의 다양한 옵션을 메서드에 전달할 수 있습니다:

.animate(properties, options);

예를 들어, CSS 속성 width와 height의 값을 toggle로 설정해 보겠습니다. 지속 시간은 5000ms로 하고, 이징 함수는 객체 형태로 전달하며, 너비에 대해서는 선형 함수, 높이에 대해서는 easeOutBounce로 지정합니다. 또한 애니메이션이 완료되면 함수가 한 번 실행됩니다 (키 complete 참조). 이 함수는 요소 #test 뒤에 'Animation complete.'라는 텍스트가 담긴 div를 배치합니다:

$('#test').animate({
	width: 'toggle',
	height: 'toggle'
}, {
	duration: 5000,
	specialEasing: {
		width: 'linear',
		height: 'easeOutBounce'
	},
	complete: function() {
		$(this).after('<div>Animation complete.</div>');
	}
});

아래 표는 객체 options의 속성과 메서드, 그리고 그에 대한 설명을 보여줍니다:

이름	설명
`duration`	애니메이션 지속 시간(밀리초 단위) - 문자열 또는 숫자. 기본값은 `400ms`입니다.
`easing`	사용할 이징 함수를 정의합니다. 기본값은 `swing`입니다.
`queue`	불리언 값 또는 문자열. 기본값은 `true`입니다. 애니메이션을 큐에 넣을지 여부를 나타냅니다. 값이 `false`인 경우 애니메이션이 즉시 시작됩니다. 매개변수를 문자열로 전달하면 애니메이션은 이 매개변수로 표현된 큐에 들어갑니다. 사용자 정의 이름을 가진 큐를 사용할 때는 애니메이션이 자동으로 시작되지 않습니다. 시작하려면 `dequeue('queuename')`를 사용하세요.
`specialEasing`	여기서 키는 CSS 속성, 값은 해당하는 이징 함수인 객체를 전달할 수 있습니다.
`step`	애니메이션화된 각 요소의 각 애니메이션화된 속성에 대해 호출되는 함수입니다. 이 함수를 통해 `Tween` 객체를 수정하여 속성 값이 설정되기 전에 변경할 수 있습니다. 매개변수로 현재 `tween` 값과 `Tween` 객체를 받습니다.
`progress`	애니메이션의 각 단계 이후에 호출되는 함수로, 애니메이션화된 속성의 수에 관계없이 각 요소당 한 번씩만 호출됩니다. 함수는 세 개의 매개변수 `animation` (프로미스 형태), `progress` (`0`부터 `1`까지의 숫자) 및 `remainingMs` (남은 밀리초 수)를 받습니다.
`complete`	요소의 애니메이션이 종료된 후 한 번 호출되는 함수입니다. 함수는 `animation` (프로미스 형태)를 받습니다.
`start`	요소의 애니메이션이 시작될 때 호출되는 함수입니다. 함수는 `animation` (프로미스 형태)와 `jumpedToEnd` (불리언 값. `true`이면 애니메이션이 자동으로 완료됨)을 받습니다.
`done`	요소의 애니메이션이 종료될 때(그 프로미스가 성공적으로 이행되었을 때) 호출되는 함수입니다. 함수는 `animation` (프로미스 형태)와 `jumpedToEnd` (불리언 값. `true`이면 애니메이션이 자동으로 완료됨)을 받습니다.
`fail`	요소의 애니메이션이 오류와 함께 종료될 때(그 프로미스가 오류와 함께 이행되었을 때) 호출되는 함수입니다. 함수는 `animation` (프로미스 형태)와 `jumpedToEnd` (불리언 값. `true`이면 애니메이션이 자동으로 완료됨)을 받습니다.
`always`	요소의 애니메이션이 완료되거나 완료 없이 중지될 때 (그 프로미스가 성공 또는 오류와 함께 이행될 때) 호출되는 함수입니다. 함수는 `animation` (프로미스 형태)와 `jumpedToEnd` (불리언 값. `true`이면 애니메이션이 자동으로 완료됨)을 받습니다.

예제

버튼 #left을 클릭하면 초록색 사각형을 왼쪽으로 50px 이동시키고, 버튼 #right을 클릭하면 오른쪽으로 50px 이동시키도록 합시다. 또한 지속 시간을 600ms - 명령어 slow로 설정하겠습니다:

<button id="left">왼쪽</button>
<button id="right">오른쪽</button>
<div class="block"></div>

div {
	position: absolute;
	background-color: green;
	left: 50px;
	width: 100px;
	height: 100px;
	margin: 5px;
}

$('#right').click(function() {
	$('.block').animate({'left': '+=50px'}, 'slow');
});
	
$('#left').click(function() {
	$('.block').animate({'left': '-=50px'}, 'slow');
});

함께 보기

요소를 부드럽게 표시하는 메서드 show,
실행 중인 애니메이션을 중지할 수 있는 메서드 stop,
이벤트 실행 지연을 설정하는 메서드 delay,
애니메이션을 전역적으로 비활성화할 수 있는 속성 jQuery.fx.off,
현재 애니메이션에 관여하고 있는 요소를 선택하는 선택자 animated,