jQuery에서 효과 종료 후 실행하기

때로는 효과가 끝난 후에 어떤 작업을 실행해야 할 필요가 있습니다. 예를 들어, 버튼을 클릭하면 어떤 블록이 부드럽게 사라지고, 블록이 완전히 사라진 후에만 화면에 무언가를 출력해야 하는 경우입니다.

코드 줄을 하나씩 순차적으로 작성하기만 하면 - 요소가 아직 사라지기도 전에 다음 코드 줄이 실행되기 시작해서 원하는 결과가 나오지 않을 것입니다. 버튼을 클릭해 보세요 - 요소가 숨겨지기 시작하고 버튼 텍스트가 즉시 변경됩니다.

다음 예시를 살펴보세요. 다음과 같은 HTML 코드가 있다고 가정해 봅시다:

<button id="hide">숨기기</button>
<div id="elem">텍스트...</div>

이 코드에는 다음과 같은 CSS가 적용되어 있습니다:

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

Javascript 코드는 다음과 같습니다:

$('#hide').click(function() {
	$('#elem').hide(1000);
	$('#hide').html('숨겨짐');
});

이러한 문제를 피하기 위해, 애니메이션 및 효과 작업을 위한 모든 메서드에는 선택적 매개변수가 마련되어 있어 애니메이션이 끝난 후 실행될 콜백(callback) 함수를 전달할 수 있습니다. 우리의 경우, 콜백 함수를 hide 메서드에 전달하고, 이 함수 본문에서 버튼 레이블을 변경했습니다:

$('#hide').click(function() {
	$('#elem').hide(1000, function() {
		$('#hide').html('숨겨짐');
	});
});