jQuery: Run one function after another completes

Question

$('#tab-featured').tap(function(){
    $('.home-section').fadeOut(function(){
        $('#home-featured').fadeIn();
    });
});

I'm trying to use the code above to call the fadeIn() after the fadeOut() completes. The fadeOut() works fine. I've run functions after others complete before, but this time it's not working and for the life of me I can't figure out why.

Running jQuery latest from their CDN.

Code:

<div id="home-mid" class="column-mid">
    <div id="home-featured" class="home-main home-section">
        <!--- Some Code --->
    </div>

    <div id="home-2" class="home-main home-section">
        <!--- Some Code --->
    </div>

    <div id="home-3" class="home-main home-section">
        <!--- Some Code --->
    </div>

    <div id="home-4" class="home-main home-section">
        <!--- Some Code --->
    </div>

    <div id="home-5" class="home-main home-section">
        <!--- Some Code --->
    </div>

    <div id="home-tabs">
        <div id="tab-featured" class="home-tab"></div>
        <div id="tab-2" class="home-tab"></div>
        <div id="tab-3" class="home-tab"></div>
        <div id="tab-4" class="home-tab"></div>
        <div id="tab-5" class="home-tab"></div>
    </div>
</div>

Update:

Tried it with hide instead of fadeOut and it worked fine. Not sure why fadeOut isn't working.

Answer 1

The first parameter of to the animation functions is a duration, the callback is the second one:

$('.home-section').fadeOut(250, function(){
    $('#home-featured').fadeIn();
});

Here's docs.

This could be a bug in fadeOut() / fadeIn() because your home-featured is also a home-section. Try working around it like this:

$('.home-section').fadeOut(function(){
    setTimeout(function () { $('#home-featured').fadeIn(); }, 50);
});