JQuery Callback Functions

From the last several articles we have been using JQuery effects and animation functions to perform different tasks. We explained the process of showing, hiding, fading, sliding and animating html elements on the screen. Most of these functions took an optional parameter callback function. We did not specified it in previous articles. Now is the time to see how JQuery callback functions work in JQuery.

JQuery Callback functions are nothing but simple functions that execute when a certain JQuery function completes its execution. For instance if we want to display a certain message after an element fades out of screen, we can do so using callback functions. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>FadeOut Effect</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $("button").click(function(){
           $('h1').fadeOut(2000,function(){
               alert("Heading is faded out");
           });
  
         });
           
         });
      </script>
</head>
    
<body>
    
    <button>Click to see fadeout in action.</button>
    <h1> This is a heading</h1>
    <p>This is a random paragraph</p>
    
    
</body>

</html>

Download Code
Run Code

The above html page contains a button, an h1 heading and a paragraph. When a user clicks the button, an event is fired which is handled by JQuery click event handler. A function executes within the event handler which fades out the h1 heading in 3 seconds. After the h1 heading fades out, the callback function executes which is passed as second parameter to fadeOut function. The callback function displays an alert box with some message on the screen.

Let’ have a look at another example. Here we will us JQuery animate function to move a circle down. Once the circle has moved, we shall use callback function to hide it from the screen. The code for this example is as follows:

<!DOCTYPE html>
<html>
<head>
    
    <title>Slide down Effect</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $('button').click(function(){
           $('.circle').animate(
               {top: '400px'},2000, function(){
                   $(this).hide();
               }
           );
              
         });
           
         });
      </script>
    <style>
        
    
        .circle{
            background-color: cornflowerblue;

           width: 200px;
            height: 200px;
            border-radius: 100%;
            position: absolute;
            margin: 0 auto;
            left: 50%;
            margin-top: 20px;
            margin-left: -100px;

    
        }
    </style>
</head>
    
<body>
    
    <div style="text-align:center">
    <button>Move Circle</button>
    <div class="circle"></div>
    </div>
    
    
</body>

</html>

Download Code
Run Code

The above html page contains a button and a blue circle. Once you click the button, you will see blue circle move down 400px in two seconds. Once it completes its movement, it will be hidden via callback function.

<<< JQuery AnimationsJQuery Chaining Functions >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .