jQuery'de Efekt Sonrası İşlem

Bazen bir efekt bittikten sonra bir işlem yapmanız gerekebilir. Örneğin, bir butona tıklandığında bir blok yavaşça gizlenmeli ve sadece tamamen gizlendikten sonra ekrana bir şey yazdırılmalı.

Eğer kod satırlarını arka arkaya yazarsanız - element daha gizlenmeye fırsat bulamadan, bir sonraki kod satırı çalışmaya başlayacak - ve istediğimiz sonucu elde edemeyeceğiz. Butona tıklayın - element gizlenmeye başlayacak ve hemen ardından butonun yazısı değişecek.

Aşağıdaki örneği inceleyin. Diyelim ki şu HTML kodumuz var:

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

Bu kod için aşağıdaki CSS yazılmıştır:

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

Javascript kodu şu şekildedir:

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

Bu gibi sorunlardan kaçınmak için, animasyon ve efektlerle çalışan tüm metodlarda, animasyon bittikten sonra çalıştırılacak bir callback fonksiyonunu iletebileceğimiz isteğe bağlı bir parametre bulunur. Bizim örneğimizde, callback fonksiyonunu hide metoduna ilettik ve bu fonksiyonun gövdesinde butonun yazısını değiştirdik:

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