jQuery - Callback Functions


jQuery - Callback Functions

  • A callback function is executed after the current effect is finished.
  • In general, the JavaScript statements are executed line by line. 

Syntax:

$(selector).hide(speed,callback);

Callback:  

  • Callback parameter is a function to be executed after the animation completes.

Sample Code :

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
    </script>
    <script>
      $(document).ready(function(){
          $("button").click(function(){
              $("p").hide("slow", function(){
                  alert("Thank you");
              });
          });
      });
    </script>
</head>
<body>
    <button>Click Hide</button>
    <p>
       Welcome to wikitechy world callback function..!!
    </p>
</body>
</html>

Code Explanation :

    Here in this statement we have created a button (Click Hide) using the button element.

    In this line we have created a paragraph <p> element with its content “Welcome to wikitechy world callback function..!!

    Here in this statement the hide event is assigned to the paragraph element, which on clicking the button “Click Hide” it hides the paragraph content, and shows the alert pop up message.

Sample Output :

    Here in this output on clicking the button “Click Hide” it hides the paragraph content.
    The paragraph content “Welcome to wikitechy world callback function..!!” specifies the paragraph statement.

    In this output when we click on the button “Click Hide” the paragraph content will be hided slowly after that the alert box pop up message “Thank You” will be displayed.


Workshop

Bug Bounty
Webinar

Join our Community

Advertise