Callback Functions

A callback function is executed after the current animation (effect) is finished.

Without using the callback function, it is possible to execute code before an animation completes. This can cause errors or unexpected results.

The following example is coded to display an alert box after a hide function is called by a button click:

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
    alert("Paragraph hidden");
  });
});

Without a callback function, the alert appears before the hide animation has completed.

To solve this problem, the alert is placed inside the callback function:

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000, function(){
      alert("Paragraph hidden");
    });
  });
});