← Back to jQuery Course | Chapter 4: Effects & Animations | Lesson 9 of 9

jQuery Callback Functions

Many jQuery effect methods, like fadeOut() or slideUp(), do not finish instantly -- they animate over a few hundred milliseconds. If you run the very next line of code immediately after calling one, that code executes before the animation has actually finished, which can cause bugs like removing an element mid-fade or reading a size that has not settled yet. A callback function solves this: it is a function you pass in that jQuery automatically runs only once the current effect has fully completed.

In this page:

  1. Why Effects Need Callbacks
  2. Passing a Callback Function
  3. Using this Inside a Callback
  4. Chaining Multiple Animations with Callbacks
  5. Callbacks Beyond Animation Effects
Syntax
javascript 
$(selector).method(arguments, function () {
  // callback runs after the method finishes
});

Why Effects Need Callbacks

jQuery effect methods like fadeOut() and slideUp() are asynchronous -- calling one starts the animation and immediately returns control to the next line of your script, without waiting for the animation to finish. If the next line depends on the animation being complete (like removing the element or starting a second animation), it will run too early unless you use a callback.

Note: Think of an effect method as "starting a timer," not "pausing your code" -- anything that must happen after the effect needs to go inside its callback.
Warning: Code placed directly after an effect call runs while the animation is still in progress, not after it finishes.

Example: Why Effects Need Callbacks

javascript 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
      <style>
      #box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
    </style>
  </head>
  <body>
    <div id="box">Box</div>
    <button id="btn">Fade Out</button>
    <button id="resetBtn">Reset</button>
    <div id="output"></div>
    <script>
      $("#btn").on("click", function() {
        $("#output").empty();
        $("#box").fadeOut(1000);
        $("#output").append("<div>This runs immediately, before the fade finishes</div>");
      });
      $("#resetBtn").on("click", function() {
        $("#box").stop(true, true).show();
        $("#output").empty();
      });
    </script>
  </body>
</html>

Passing a Callback Function

A callback is added as the final argument to an effect method call -- fadeOut(1000, function() { ... }) -- and jQuery automatically invokes that function once the fade has fully finished, with no manual timing or setTimeout needed.

Note: Keep callback functions short and focused on the single next step; if the logic grows complex, define a named function instead of an inline one.
Warning: Calling the function with parentheses, like fadeOut(1000, myFunc()), executes myFunc immediately and passes its return value instead of the function itself -- always pass the bare function reference.

Example: Passing a Callback Function

javascript 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
      <style>
      #box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
    </style>
  </head>
  <body>
    <div id="box">Box</div>
    <button id="btn">Fade Out</button>
    <button id="resetBtn">Reset</button>
    <div id="output"></div>
    <script>
      $("#btn").on("click", function() {
        $("#box").fadeOut(1000, function() {
          $("#output").text("Fade finished");
        });
      });
      $("#resetBtn").on("click", function() {
        $("#box").stop(true, true).show();
        $("#output").text("");
      });
    </script>
  </body>
</html>

Using this Inside a Callback

Inside a callback function, the this keyword refers to the specific DOM element the effect was applied to, exactly like inside a regular jQuery event handler -- wrapping it with $(this) lets you keep working with that same element using normal jQuery methods once the animation completes.

Note: Wrap this in $(this) whenever you need to call jQuery methods on the animated element from inside its own callback.
Warning: Using an arrow function for the callback changes what this refers to, since arrow functions do not bind their own this -- use a regular function() when you need this to point to the animated element.

Example: Using this Inside a Callback

javascript 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
      <style>
      #box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
    </style>
  </head>
  <body>
    <div id="box" data-name="mybox">Box</div>
    <button id="btn">Fade Out</button>
    <button id="resetBtn">Reset</button>
    <div id="output"></div>
    <script>
      $("#btn").on("click", function() {
        $("#box").fadeOut(1000, function() {
          $("#output").text("data-name: " + $(this).data("name"));
        });
      });
      $("#resetBtn").on("click", function() {
        $("#box").stop(true, true).show();
        $("#output").text("");
      });
    </script>
  </body>
</html>

Chaining Multiple Animations with Callbacks

Nesting a second effect call inside the first effect's callback creates a simple sequence: the second animation only starts once the first one has completely finished, letting you build a multi-step animated sequence (like fade out, then slide up, then remove) that runs in a predictable, guaranteed order.

Note: For long sequences of three or more chained animations, consider jQuery's Deferred/Promise objects instead of deeply nested callbacks, which can become hard to read.
Warning: Deeply nesting many callbacks inside callbacks (sometimes called "callback hell") makes code progressively harder to read and debug as the sequence grows.

Example: Chaining Multiple Animations with Callbacks

javascript 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
      <style>
      #box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
    </style>
  </head>
  <body>
    <div id="box">Box</div>
    <button id="btn">Run</button>
    <button id="resetBtn">Reset</button>
    <div id="output"></div>
    <script>
      $("#btn").on("click", function() {
        $("#output").text("Sliding up...");
        $("#box").slideUp(500, function() {
          $("#output").text("Sliding back in...");
          $(this).fadeIn(500, function() {
            $("#output").text("Both animations finished");
          });
        });
      });
      $("#resetBtn").on("click", function() {
        $("#box").stop(true, true).show();
        $("#output").text("");
      });
    </script>
  </body>
</html>

Callbacks Beyond Animation Effects

The callback pattern is not unique to visual effects -- many other jQuery methods, like $(document).ready(), $.getJSON(), and $.ajax(), also accept a function to run once their own asynchronous work finishes. Understanding callbacks here carries directly over to understanding AJAX requests and deferred objects covered later in this course.

Note: Recognize the callback pattern as a general jQuery convention, not a special animation-only feature -- the same "pass a function to run later" idea appears throughout the library.
Warning: Assuming callbacks are exclusive to effects can make AJAX and Deferred topics feel unfamiliar later, when they are really the same underlying pattern applied to network requests instead of animations.

Example: Callbacks Beyond Animation Effects

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      $("#output").text("DOM ready callback ran");
    });

    $("#resetBtn").click(function() {
      $("#output").empty();
    });
  </script>
</body>
</html>
Related Topics

Animation Callback Functions · CSS3 Transitions vs jQuery Animations · Global Animation Settings · Animation Queues and stop()

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Writing code that depends on an animation being finished directly after the animation call, instead of inside its callback, causing race conditions.
  2. Forgetting that without a callback, jQuery does not pause or wait for an effect -- the rest of your script keeps running immediately in parallel with the animation.
  3. Passing the callback function with parentheses, like fadeOut(myFunction()), which calls the function immediately instead of passing a reference for jQuery to call later.
Chapter Summary
  • A callback function is passed as the last argument to an effect method and runs automatically once that effect finishes.
  • Without a callback, code immediately following an effect call runs right away, not after the animation completes.
  • Callbacks are commonly used to chain a sequence of actions, like running a second animation only after the first one is done.
Browser Support

jQuery callback functions are a core language feature (not a browser API) and work identically in every browser jQuery itself supports.

🔒

Chapter Quiz — Complete all 9 topics to unlock

0/9 topics done

Complete these topics first:

← Previous Lesson CSS3 Transitions vs jQuery Animations Next Lesson → Getting and Setting Text HTML and Values

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.