Akce po skončení efektu v jQuery

Někdy může být potřeba provést nějakou akci po skončení efektu. Například po kliknutí na tlačítko by se nějaký blok měl plynule skrýt a teprve poté, co je kompletně skrytý, je potřeba něco zobrazit na obrazovce.

Pokud budete psát řádky kódu jeden za druhým - prvek se nestihne skrýt a již začne provádět další řádek kódu - a výsledek nebude takový, jaký bychom chtěli. Klikněte na tlačítko - prvek se začne skrývat a okamžitě se změní text tlačítka.

Podívejte se na následující příklad. Předpokládejme, že máme následující HTML kód:

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

K tomuto kódu je napsáno CSS:

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

Javascript kód vypadá takto:

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

Abychom se těmto problémům vyhnuli, všechny metody pro práci s animací a efekty mají k dispozici volitelný parametr, do kterého můžeme předat callback funkci, která se provede po skončení animace. V našem případě jsme předali callback funkci do metody hide, a již v těle této funkce jsme změnili text tlačítka:

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