jQuery Callback Function

jQuery callback function executes after the completion of the jQuery effect. It prevents the next line code execution till the jQuery effect completion.

Why Callback Function Is Necessory ?

Please keep in mind that javascript code is executed line by line. The jquery effect takes some time to finish the effect. During the execution of the jquery statement, the next line of code may be executed hence to prevent this from happening, jquery provides a callback function for each jquery effect method.

General Syntax Of Callback Function

    
 $(selector).slideToggle(duration, callback);

duration: indicates the jquery effect duration that has predefined string values such as "slow" and "fast" or in numeric milliseconds.

callback: Callback is an optional parameter that indicates the callback function and it starts to work whenever the jquery effect is completed..

Jquery Effect Without Callback Function

Source Code

          
            $(document).ready(function () {
  $("button").click(function () {
    $("p").hide("slow");
    alert("The slide toggle effect has completed.");
  });
});

Try it now

jQuery Effect With Callback Function

In this example, the callback function will be executed after the finishing of the jQuery effect.

Source Code

          
            $(document).ready(function () {
  $(".btn-animate").click(function () {
    $(".animated-box").hide("slow", function () {
      alert("This is a callback function method.");
    });
  });
});

Try it now

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4