Azione dopo la fine dell'effetto in jQuery

A volte potrebbe essere necessario eseguire un'azione dopo la fine di un effetto. Ad esempio, quando si clicca su un pulsante, un blocco dovrebbe nascondersi gradualmente e solo dopo che si è completamente nascosto, è necessario visualizzare qualcosa sullo schermo.

Se si scrivono semplicemente righe di codice una dopo l'altra - l'elemento non avrà ancora fatto in tempo a nascondersi, quando inizierà ad essere eseguita la riga di codice successiva - e si otterrà non ciò che vorremmo. Premi il pulsante - l'elemento inizierà a nascondersi e immediatamente cambierà il testo del pulsante.

Guarda il seguente esempio. Supponiamo di avere il seguente codice HTML:

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

A questo codice è associato il CSS:

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

Il codice Javascript appare così:

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

Per evitare tali problemi, in tutti i metodi per lavorare con animazioni ed effetti è previsto un parametro opzionale, in cui possiamo passare una funzione di callback, che verrà eseguita dopo il termine dell'animazione. Nel nostro caso, abbiamo passato una funzione di callback nel metodo hide, e nel corpo di questa funzione abbiamo cambiato il testo del pulsante:

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