การดำเนินการหลังจากเอฟเฟกต์สิ้นสุดลงใน jQuery

บางครั้งคุณอาจจำเป็นต้องดำเนินการบางอย่างหลังจากที่เอฟเฟกต์สิ้นสุดลง ตัวอย่างเช่น เมื่อคลิกปุ่ม บล็อกบางส่วนควรซ่อนอย่างราบรื่น และหลังจากที่มันซ่อนอย่างสมบูรณ์แล้ว จึงจะต้องแสดงบางสิ่งบนหน้าจอ

หากเขียนโค้ดบรรทัดต่อบรรทัดโดยปกติ - องค์ประกอบยังซ่อนไม่ทันเสร็จ บรรทัดถัดไปก็เริ่มทำงาน - และผลลัพธ์ที่ได้จะไม่เป็นไปตามที่เราต้องการ กดปุ่ม - องค์ประกอบเริ่มซ่อน และข้อความบนปุ่มจะเปลี่ยนทันที

ดูตัวอย่างต่อไปนี้ สมมติว่าเรามีโค้ด HTML ดังนี้:

<button id="hide">hide</button>
<div id="elem">text...</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('hidden');
});

เพื่อหลีกเลี่ยงปัญหาดังกล่าว ในทุกเมธอด ที่ทำงานกับแอนิเมชันและเอฟเฟกต์จะมี พารามิเตอร์เสริมนี้ ซึ่งเราสามารถ ส่ง callback function ไปได้ ซึ่งจะทำงานหลัง แอนิเมชันสิ้นสุดลง ในกรณีของเรา เราส่ง callback function ไปยังเมธอด hide, และในเนื้อหาของฟังก์ชันนี้ เราเปลี่ยนข้อความบนปุ่ม:

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