jQuery의 animate 메소드

이전 수업들에서 다루었던 모든 메소드는 다소 제한적입니다 - 그것들은 만들어질 때 의도된 대로만 작동합니다. 애니메이션에 대해 더 많은 제어가 필요하다면 범용 메소드 animate를 사용하세요.

이 메소드는 첫 번째 매개변수로 애니메이션을 적용하려는 CSS 속성의 새로운 값을 설정해야 하는 객체를 받고, 두 번째 매개변수로는 애니메이션 실행 시간을 받습니다.

다음 HTML 코드에서 이 메소드를 구현해 보겠습니다:

<button id="button">click me</button>
<div id="elem">text...</div>

CSS는 다음과 같이 보이게 해 봅시다:

#elem {
	width: 150px;
	height: 150px;
	padding: 10px;
	border: 1px solid green;
}

버튼을 클릭했을 때 요소가 다음 크기로 축소되도록 해 봅시다: 높이 - 50px, 너비 - 100px:

$('#button').click(function() {
	$('#elem').animate({height: 50, width: 100}, 1000);
});

height: '+=50'와 같은 형식으로 값을 지정하면 애니메이션은 다음과 같이 작동합니다: 현재 높이 값에 50px(우리의 경우)가 더해지고 요소는 새로운 값까지 부드럽게 애니메이션됩니다. 예시를 살펴봅시다:

$('#button').click(function() {
	$('#elem').animate({height: '+=50', width: '+=50'}, 1000);
});

animate 메소드에 대한 더 자세한 내용은 jQuery 레퍼런스를 참고하세요.

다음과 같은 마크업이 있습니다:

<body>
	<div id="block"></div>
</body>

div {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	cursor: pointer;
	margin-bottom: 20px;
}

#block 아이디를 가진 div를 클릭했을 때 그 너비가 200px로 1100ms 동안 증가하도록 만드세요.

첫 번째 작업의 마크업을 사용하세요. #block 아이디를 가진 div를 클릭할 때마다 그 너비가 200px씩 증가하고, 각각의 증가가 900ms 동안 일어나도록 만드세요.

첫 번째 작업의 마크업을 사용하세요. #block 아이디를 가진 div를 클릭할 때마다 그 너비와 높이가 100px씩 증가하고, 각각의 증가가 950ms 동안 일어나도록 만드세요.

첫 번째 작업의 마크업을 사용하세요. #block 아이디를 가진 div를 클릭할 때마다 그것이 오른쪽으로 100px 이동하고, 각각의 이동이 700ms 동안 일어나도록 만드세요.