Action after effect ends in jQuery

Sometimes you may need to perform some action after the effect ends. For example, when you press a button, some block should smoothly hide, and only after it is completely hidden, you need to display something on the screen.

If you simply write lines of code one after another, the element will not have time to hide before the next line of code starts to execute, and you will not get what you want. Click on the button - the element will start to hide and the button text will immediately change.

Look at the following example. Let's say we have the following HTML code:

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

This code has the following CSS:

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

Javascript the code looks like this:

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

To avoid such problems, all methods for working with animation and effects have an optional parameter, to which we can pass a callback function that will be executed after the animation is finished. In our case, we passed the callback function to the method hide, and already in the body of this function we changed the name of the button:

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