jQuery Callback Functions
In this page:
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
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box">Box</div>
<script>
$("#box").fadeOut(1000);
console.log("This runs immediately, before the fade finishes");
</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
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box">Box</div>
<script>
$("#box").fadeOut(1000, function() {
console.log("Fade finished");
});
</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
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box" data-name="mybox">Box</div>
<script>
$("#box").fadeOut(1000, function() {
console.log($(this).data("name"));
});
</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
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box">Box</div>
<script>
$("#box").slideUp(500, function() {
$(this).fadeIn(500);
});
</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
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
console.log("DOM ready callback ran");
});
</script>
</body>
</html>- Writing code that depends on an animation being finished directly after the animation call, instead of inside its callback, causing race conditions.
- 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.
- Passing the callback function with parentheses, like fadeOut(myFunction()), which calls the function immediately instead of passing a reference for jQuery to call later.
- 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.
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: