Acción después de finalizar un efecto en jQuery

A veces puede necesitar ejecutar alguna acción después de que termine un efecto. Por ejemplo, al hacer clic en un botón, algún bloque debe ocultarse suavemente y solo después de que esté completamente oculto, necesita mostrar algo en la pantalla.

Si simplemente escribe líneas de código una tras otra, el elemento no habrá tenido tiempo de ocultarse antes de que comience a ejecutarse la siguiente línea de código, y resultará algo diferente a lo que queríamos. Presione el botón: el elemento comenzará a ocultarse e inmediatamente cambiará el texto del botón.

Vea el siguiente ejemplo. Supongamos que tenemos el siguiente código HTML:

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

Para este código está definido el CSS:

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

El código Javascript se ve así:

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

Para evitar tales problemas, en todos los métodos para trabajar con animaciones y efectos se prevé un parámetro opcional, en el cual podemos pasar una función callback, que se ejecutará después de que finalice la animación. En nuestro caso, pasamos la función callback al método hide, y ya en el cuerpo de esta función cambiamos el nombre del botón:

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