Δράση μετά το τέλος του εφέ στο jQuery

Μερικές φορές μπορεί να χρειαστεί να εκτελέσετε μια ενέργεια μετά το τέλος ενός εφέ. Για παράδειγμα, όταν πατάτε ένα κουμπί, ένα block θα πρέπει να κρυφτεί σταδιακά και μόνο μετά από το ότι έχει κρυφτεί τελείως, χρειάζεται να εμφανιστεί κάτι στην οθόνη.

Εάν απλώς γράψετε γραμμές κώδικα η μία μετά την άλλη - το στοιχείο δεν θα έχει προλάβει να κρυφτεί, όταν αρχίσει να εκτελείται η επόμενη γραμμή κώδικα - και το αποτέλεσμα δεν θα είναι αυτό που θα θέλαμε. Πατήστε το κουμπί - το στοιχείο θα αρχίσει να κρύβεται και αμέσως μετά θα αλλάξει το κείμενο του κουμπιού.

Δείτε το ακόλουθο παράδειγμα. Ας υποθέσουμε ότι έχουμε τον ακόλουθο κώδικα 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-συνάρτηση, η οποία θα εκτελεστεί μετά το τέλος της κινούμενης εικόνας. Στην περίπτωσή μας, περάσαμε τη callback-συνάρτηση στη μέθοδο hide, και ήδη στο σώμα αυτής της συνάρτησης αλλάξαμε το κείμενο του κουμπιού:

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