Ação após o término do efeito em jQuery

Às vezes, você pode precisar executar uma ação após o término de um efeito. Por exemplo, ao clicar em um botão, um bloco deve ser ocultado suavemente e só após ele estar completamente oculto, precisamos exibir algo na tela.

Se você simplesmente escrever linhas de código uma após a outra - o elemento ainda não terá tempo de ficar oculto quando a próxima linha de código começar a ser executada - e o resultado não será o que gostaríamos. Clique no botão - o elemento começará a desaparecer e o texto do botão mudará imediatamente.

Veja o seguinte exemplo. Suponha que temos o seguinte código HTML:

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

O seguinte CSS está definido para este código:

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

O código Javascript é assim:

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

Para evitar tais problemas, todos os métodos de animação e efeitos possuem um parâmetro opcional, no qual podemos passar uma função de callback, que será executada após o término da animação. No nosso caso, passamos a função de callback para o método hide, e no corpo dessa função alteramos o texto do botão:

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