Home > DeveloperSection > Articles > JQuery callback method

JQuery callback method


JQuery JQuery 
Ratings:
0 Comment(s)
 6513  View(s)
Rate this:

Using JQuery callback method

In JQuery callback function will execute when animation effect has finished. Assume that if animation effect applies on image and effect is not finished and execution is reached on next line then in this situation code will generate error, if we want to prevent such type of errors in code then we can use callback method. This method will executed when animation effect has been completed.

Code:

<head>

 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

 

    <script type="text/javascript">

        $(document).ready(function()        {

            $("button").click(function()            {

                $("img").hide(1000, function() //image will hide after animation effect then message will show(callback)

                {

                    alert("Image has hide");

                });

            });

        });

    </script>

</head>

<body>

    <h2>

        JQuery callback method</h2>

    <img src="Lighthouse.jpg" id="img" style="height: 300px; width: 400px; position: relative" />    <br />

    <br />

    <button>

        Click to hide</button>

</body>

</html>

JQuery callback method

If I will click on button,image will start disappear from page as shown below :

JQuery callback method

If image has disappeared from page, popup window will show message on page as shown below:

JQuery callback method


Don't want to miss updates? Please click the below button!

Follow MindStick