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:

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

Zu diesem Code wurde CSS geschrieben:

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

Der Javascript-Code sieht so aus:

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

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