Aktion nach Ende des Effekts in jQuery

Manchmal kann es erforderlich sein, eine Aktion auszuführen, nachdem ein Effekt beendet ist. Zum Beispiel: Bei einem Klick auf einen Button soll ein Block sanft ausgeblendet werden und erst danach soll etwas auf dem Bildschirm ausgegeben werden.

Wenn man Codezeilen einfach hintereinander schreibt - hat das Element sich noch nicht vollständig versteckt, da wird die nächste Codezeile bereits ausgeführt - und das Ergebnis ist nicht das, was wir wollten. Klicken Sie auf den Button - das Element beginnt sich zu verstecken und sofort ändert sich der Text des Buttons.

Sehen Sie sich das folgende Beispiel an. Nehmen wir an, wir haben den folgenden HTML-Code:

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

Zu diesem Code wurde CSS geschrieben:

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

Der Javascript-Code sieht so aus:

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

Um solche Probleme zu vermeiden, ist in allen Methoden für die Arbeit mit Animationen und Effekten ein optionaler Parameter vorgesehen, in den wir eine Callback-Funktion übergeben können, die nach Beendigung der Animation ausgeführt wird. In unserem Fall haben wir die Callback-Funktion an die Methode hide übergeben, und im Körper dieser Funktion dann den Text des Buttons geändert:

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