Animation Callback Functions
A callback runs after an animation finishes.
In this page:
Syntax
$(selector).effect(speed, function () {
// runs after the effect completes
});Completion Callback
A completion callback is a function passed as the last argument to an effect method, and jQuery runs it only after that specific animation finishes.
Example: Completion Callback
<!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 complete");
});
});
$("#resetBtn").on("click", function() {
$("#box").stop(true, true).show();
$("#output").text("");
});
</script>
</body>
</html>animate() Callback
animate() accepts a callback as its final argument just like the simpler effect methods do, running it once the property transitions it's controlling have all completed.
Example: animate() Callback
<!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" style="width:100px">Box</div>
<button id="btn">Animate</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#box").animate({width: "300px"}, function() {
$("#output").text("Animation complete");
});
});
$("#resetBtn").on("click", function() {
$("#box").stop(true).css("width", "100px");
$("#output").text("");
});
</script>
</body>
</html>Run Another Action
Callbacks are the standard way to chain behavior onto the end of an animation -- for example removing an element from the DOM only after it has finished fading out, rather than removing it immediately and cutting the animation short.
Example: Run Another Action
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#box { background: steelblue; color: #1a1a1a; padding: 10px; border-radius: 4px; }
</style>
<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; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="resetBtn">Reset</button>
<section id="demo">
<div id="box">Box</div>
<button id="btn">Fade Out and Remove</button>
<div id="output"></div>
</section>
<script>
var original = $("#demo").html();
function init() {
$("#btn").on("click", function() {
$("#box").fadeOut(1000, function() {
$(this).remove();
$("#output").text("Box removed from the DOM (reload to reset)");
});
});
}
init();
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
init();
});
</script>
</body>
</html>Callback this
Inside a jQuery animation callback, the keyword this refers to the raw DOM element that was animated, not a jQuery object, so it typically needs to be wrapped in $(this) before calling other jQuery methods on it.
Example: Callback this
<!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("this.data-name = " + $(this).data("name"));
});
});
$("#resetBtn").on("click", function() {
$("#box").stop(true, true).show();
$("#output").text("");
});
</script>
</body>
</html>Callback and Queue
Starting a second animation from inside a completion callback lets you build multi-step sequences, like sliding an element up and then fading it out, without both effects running simultaneously.
Example: Callback and Queue
<!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() {
$("#box").slideUp(500, function() {
$("#output").text("slideUp finished, running fadeOut in the callback");
$(this).fadeOut(500);
});
});
$("#resetBtn").on("click", function() {
$("#box").stop(true, true).show();
$("#output").text("");
});
</script>
</body>
</html>Related Topics
{# 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
- Writing the follow-up code after
.fadeOut(1000)instead of in the callback, so it runs immediately while the animation is still going. - Using an arrow function as the callback and then relying on
$(this), which no longer refers to the animated element. - Passing the callback with parentheses like
.fadeOut(1000, done()), which runsdoneat once instead of when the animation ends.
🔒
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: