Akcija po završetku efekta u jQuery

Ponekad vam može zatrebati da izvršite neku akciju nakon završetka efekta. Na primer, klikom na dugme neki blok treba da se glatko sakrije i tek nakon što se potpuno sakrije, treba nešto da se prikaže na ekranu.

Ako jednostavno pišete linije koda jednu za drugom - element još neće uspeti da se sakrije, a već će početi da se izvršava sledeća linija koda - i ispašće nešto što nismo želeli. Pritisnite dugme - element će početi da se skriva i odmah će se promeniti tekst na dugmetu.

Pogledajte sledeći primer. Neka imamo sledeći HTML kod:

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

Za ovaj kod je napisan CSS:

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

Javascript kod izgleda ovako:

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

Da bismo izbegli takve probleme, u svim metodima za rad sa animacijama i efektima postoji taj opcioni parametar, u koji možemo proslediti callback-funkciju, koja će se izvršiti nakon završetka animacije. U našem slučaju, prosledili smo callback-funkciju metodu hide, i tek u telu te funkcije promenili naziv dugmeta:

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