Action après la fin d'un effet en jQuery

Parfois, vous pourriez avoir besoin d'exécuter une action après la fin d'un effet. Par exemple, en cliquant sur un bouton, un bloc doit se cacher progressivement et seulement après qu'il soit complètement caché, il faut afficher quelque chose à l'écran.

Si vous écrivez simplement les lignes de code les unes après les autres - l'élément n'aura pas encore eu le temps de se cacher que la ligne suivante de code commencera à s'exécuter - et le résultat ne sera pas ce que nous souhaitions. Cliquez sur le bouton - l'élément commencera à se cacher et le texte du bouton changera immédiatement.

Regardez l'exemple suivant. Supposons que nous ayons le code HTML suivant :

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

Le CSS suivant est appliqué à ce code :

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

Le code Javascript ressemble à ceci :

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

Pour éviter de tels problèmes, dans toutes les méthodes de travail avec l'animation et les effets, un paramètre optionnel est prévu, dans lequel nous pouvons passer une fonction de callback, qui s'exécutera après la fin de l'animation. Dans notre cas, nous avons passé une fonction de callback dans la méthode hide, et dans le corps de cette fonction, nous avons changé le texte du bouton :

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