Akcia po skončení efektu v jQuery

Niekedy môžete potrebovať vykonať nejakú akciu po skončení efektu. Napríklad, po kliknutí na tlačidlo by sa mal nejaký blok plynulo skryť a až potom, keď je úplne skrytý, je potrebné niečo zobraziť na obrazovke.

Ak budete písať riadky kódu jeden za druhým - prvok sa ešte nestihne skryť, ako sa začne vykonávať ďalší riadok kódu - a výsledok nebude taký, aký by sme chceli. Kliknite na tlačidlo - prvok sa začne skrývať a okamžite sa zmení text tlačidla.

Pozrite si nasledujúci príklad. Predpokladajme, že máme nasledujúci HTML kód:

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

K tomuto kódu je napísaný CSS:

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

Javascript kód vyzerá takto:

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

Aby ste sa vyhli takýmto problémom, vo všetkých metódach pre prácu s animáciou a efektmi je poskytnutý tento voliteľný parameter, do ktorého môžeme odovzdať callback-funkciu, ktorá sa vykoná po skončení animácie. V našom prípade sme odovzdali callback-funkciu do metódy hide, a už v tele tejto funkcie sme zmenili názov tlačidla:

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