jQuery Callback Functions

A callback function is simply a function passed as an argument to another function, to be executed after that function finishes its work. jQuery leans on this pattern heavily — especially with effects like fadeOut(), slideUp(), and animate(), which run over time instead of instantly. Without a callback, code placed right after an effect call runs immediately, often before the animation has actually completed, which can cause visual glitches or logic that fires too early.

1) What Is a Callback Function?

Before jQuery, understand the plain JavaScript idea first: a function can accept another function as a parameter and call it later, once its own work is done.


function processOrder(item, callback){
  // pretend this takes some time
  setTimeout(function(){
    return callback(item);
  }, 1000);
}

processOrder('Pizza', function(item){
  console.log(item + ' is ready!');
});
Try it Yourself »

2) The Problem: Without a Callback

jQuery effects like fadeOut() are asynchronous — they animate over time and return immediately. Code on the next line runs right away, not after the fade is done.


$('#box').fadeOut(1000);
$('#box').remove(); // runs instantly, box vanishes before the fade finishes!
Try it Yourself »

3) The Fix: Using a Callback

Pass a function as the last argument to fadeOut(). jQuery calls it only after the animation completes, so remove() waits its turn.


$('#box').fadeOut(1000, function(){
  $(this).remove(); // runs only after the fade completes
});
Try it Yourself »
Tip: Inside a jQuery effect callback, this refers to the DOM element the effect ran on. Wrap it with $(this) to use jQuery methods on it.

4) Callbacks with slideUp() and animate()

Most jQuery effect methods accept a callback as their final argument, right after the duration.


$('#panel').slideUp(400, function(){
  $('#status').text('Panel is fully closed.');
});

$('#ball').animate({ left: '250px' }, 600, function(){
  $(this).css('background', '#04AA6D');
});
Try it Yourself »

5) Multiple Chained Callbacks

Callbacks can trigger the next step of a sequence, so several effects run one after another in a guaranteed order.


$('#box').fadeOut(400, function(){
  $(this).slideDown(400, function(){
    $(this).fadeIn(400, function(){
      console.log('Sequence complete!');
    });
  });
});
Try it Yourself »
Watch out: Deeply nested callbacks ("callback pyramids") get hard to read. For long sequences, jQuery's .queue(), promises via .promise(), or plain async/await with setTimeout-based helpers are cleaner alternatives — but understanding the basic callback pattern is still essential.