Jquery CallBack Tutorial

Jquery CallBack Tutorial

In this tutorial we will see how to use callback function in Jquery. Watch below video tutorial  about Jquery Callback function.


You may have a task which depends upon completion of other task. However JavaScript executes the code line by line which may lead to an error. To ovecome such situations you can use Jquery CallBack functionality.

Source Code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <title>Jquery Callback function Tutorial</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


        $("document").ready(function () {

            $("#button1").click(function () {

                $("#div1").hide("slow", function() {
                    alert("Using call back");


            $("#button2").click(function () {


                alert("without using call back");



    <div id="div1" style="height: 500px; width: 500px;background-color:blue"> </div>

    <input type="button" id="button1" value="Hide using CallBack">
    <input type="button" id="button2" value="Hide without CallBack">


Watch free learning video tutorials about Jquery for beginners series at


Learning JqueryBasics of jqueryJquery Ajax TutorialJQuery SlideJquery Trim StringJQuery Select ChangeJQuery Animate Div Height and WidthGoogle JQuery CDNJQuery Hidden Field Set ValueGet Selected Value From Dropdownlist [JQuery]How to call function in JQuery


My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.

I'm Satalaj.