Hành động sau khi hiệu ứng kết thúc trong jQuery

Đôi khi bạn có thể cần thực hiện một hành động nào đó sau khi hiệu ứng kết thúc. Ví dụ, khi nhấn vào một nút, một khối nào đó cần được ẩn đi một cách mượt mà và chỉ sau khi nó hoàn toàn biến mất, mới cần hiển thị điều gì đó lên màn hình.

Nếu chỉ đơn giản viết các dòng code nối tiếp nhau - phần tử sẽ chưa kịp ẩn đi, thì dòng code tiếp theo đã bắt đầu thực thi - và kết quả sẽ không phải điều chúng ta mong muốn. Hãy nhấn vào nút - phần tử sẽ bắt đầu ẩn và ngay lập tức văn bản trên nút thay đổi.

Hãy xem ví dụ sau đây. Giả sử chúng ta có code HTML sau:

<button id="hide">hide</button>
<div id="elem">text...</div>

CSS được áp dụng cho code này là:

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

Code Javascript trông như thế này:

$('#hide').click(function() {
	$('#elem').hide(1000);
	$('#hide').html('hidden');
});

Để tránh những vấn đề như vậy, trong tất cả các phương thức làm việc với hoạt ảnh và hiệu ứng đều có một tham số tùy chọn như vậy, nơi chúng ta có thể truyền một callback-function, hàm này sẽ thực thi sau khi hoạt ảnh kết thúc. Trong trường hợp của chúng ta, chúng ta đã truyền callback-function vào phương thức hide, và ngay trong thân hàm đó đã thay đổi tên của nút:

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