jQuery - callback function

In jQuery, a callback function is a function that is executed after a particular action or effect completes. Many jQuery methods, especially animation methods, allow you to pass a callback function that runs when the method finishes. This is useful for sequencing actions or performing tasks after an animation or event has completed.

1. Basic Syntax

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

  • selector → Target element(s)

  • action → jQuery method (like .hide(), .show(), .fadeIn(), .slideUp(), etc.)

  • speed → Optional: "slow", "fast", or milliseconds (e.g., 1000)

  • callback → Optional: function executed after the action finishes

2. Example with .hide()

$("#btn").click(function(){
    $("#box").hide(1000, function(){
        alert("Box is now hidden!");
    });
});

Explanation:

  • #box will hide over 1 second.

  • After hiding, the callback function executes, showing an alert.

3. Example with .fadeIn()

$("#btn").click(function(){
    $("#box").fadeIn("slow", function(){
        $(this).css("background", "lightgreen"); // Change color after fade in
    });
});

  • Here, the callback modifies the box after it has fully appeared.

4. Example with .slideUp() / .slideDown()

$("#hideBtn").click(function(){
    $("#box").slideUp(500, function(){
        console.log("Slide up finished!");
    });
});

$("#showBtn").click(function(){
    $("#box").slideDown(500, function(){
        console.log("Slide down finished!");
    });
});

  • Callback runs only after the slide animation completes.

5. Example with Chained Animations

$("#btn").click(function(){
    $("#box").fadeOut(500, function(){
        $(this).text("New Content").fadeIn(500);
    });
});

Explanation:

  1. Box fades out over 0.5 seconds.

  2. Callback changes text inside the box.

  3. Box fades back in over 0.5 seconds.

This is useful for sequential animations.

6. Key Points About Callbacks

  1. Many animation methods support callbacks:
    .hide(), .show(), .toggle(), .fadeIn(), .fadeOut(), .fadeToggle(), .fadeTo(), .slideUp(), .slideDown(), .slideToggle(), .animate()

  2. Callback is executed after the main action completes.

  3. You can use this inside the callback to refer to the current element.

7. Summary Example

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Callback Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    $(function(){
        $("#btn").click(function(){
            $("#box").slideUp(500, function(){
                $(this).text("Animation Complete!").slideDown(500);
            });
        });
    });
    </script>
</head>
<body>
    <button id="btn">Animate Box</button>
    <div id="box" style="width:200px; height:100px; background:skyblue; margin-top:10px;">
        Hello jQuery!
    </div>
</body>
</html>

Explanation:

  • Box slides up → callback changes text → box slides down.

Conclusion:
The callback function in jQuery is a powerful way to ensure code runs after an action or animation finishes, allowing you to chain effects, manipulate elements, or trigger other tasks in sequence.