How to Sequence jQuery fadeOut and slideDown

This article explains how to properly sequence a jQuery fadeOut() animation followed immediately by a slideDown() effect. While jQuery animations naturally queue on a single element, achieving a smooth, seamless transition—especially when changing content or manipulating multiple elements—requires specific approaches such as standard chaining, completion callbacks, or jQuery promises.

Method 1: Direct Chaining (Same Element)

Because jQuery automatically queues animations applied to the same element using its internal fx queue, you can chain the two methods together directly. The slideDown() animation will not begin until fadeOut() finishes.

$('#targetElement').fadeOut(400).slideDown(400);

In this example, the element fades to display: none over 400 milliseconds, and once completely hidden, it slides down back into view.

Method 2: The Callback Function (Best for Updating Content)

If you need to change the HTML content, update text, or alter styles while the element is invisible, direct chaining may cause the update to happen before the fade finishes. Passing a callback function inside fadeOut() ensures your changes and the subsequent slideDown() occur strictly after the fade is complete.

$('#targetElement').fadeOut(400, function() {
    // Optional: update element content while it is hidden
    $(this).html('<p>New content loaded!</p>');
    
    // Trigger slideDown immediately after fade completes
    $(this).slideDown(400);
});

This method is also ideal when targeting two different elements (e.g., fading out one element and sliding down another):

$('#elementA').fadeOut(400, function() {
    $('#elementB').slideDown(400);
});

Method 3: Using jQuery Promises

For modern, cleaner code—especially when dealing with dynamic workflows or multiple asynchronous actions—you can utilize the .promise() method.

$('#targetElement')
    .fadeOut(400)
    .promise()
    .done(function() {
        $('#targetElement').slideDown(400);
    });

Summary of Differences

• Direct Chaining: Best for simple visual effects on a single element where no DOM changes occur in between.
• Callbacks: Best for altering content, attributes, or controlling different elements sequentially.
• Promises: Best for clean asynchronous code handling complex, multi-step animation sequences.