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:

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

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

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

O código Javascript é assim:

javascript$('#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:

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