Callback Functions for Effects and Animations

How to wait for an effect to conclude

Often, we need to perform a specific task after a given effect is concluded, like deleting an element after the fade-out effect is completed. Since the code is executed line-by-line, you might think that if we place a task after the effect in code, it will execute that task after the effect is concluded.

However, that is not the case. Consider the example below. In the “Fade Out” button event handler, we fade out the div element using the fadeOut() effect in line 3. Then in line 4, we generate an alert box with text “Task to be performed after the fade-out effect!”

Run the code below. In the web page output, click on the “Fade Out” button element. You will see that the alert pops up before the fade-out effect completes.