If you have a situation with your jQuery script where you do not want something to happen until something else is finished, you can employ a callback function.

As JavaScript runs it will iterate through the code line by line. There will be situations where the following line of code will come into play before the previous effect has completed. This can cause errors and it can ruin the intended progression of your program.

To be certain that the next step will not run until the previous step in completed, add the function() inside the parameters of the previous function.

In the example below, there is a callback function that stops the blue balloon from animation until after the red balloon animation has completed. The same goes for the green balloon. The callback functions are highlighted.

    $('#balloonred').animate({"top":"-200px"},2000, function(){
        $('#balloonblue').animate({"top":"-200px"},2000, function(){

Here is the result: