CODEWITHSUNDEEP
jquery
CoreyRS
CoreyRS

Reputation: 2267

jQuery: Run one function after another completes

$('#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.

Upvotes: 3

Views: 4392

Answers (2)

Konstantin Dinev
Konstantin Dinev

Reputation: 34915

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);
});

Upvotes: 5

Siva Charan
Siva Charan

Reputation: 18064

You need to pass the duration

$('#tab-featured').live('tap',function(event) {
    $('.home-section').fadeOut(2000, function(){
        $('#home-featured').fadeIn(200);
    });
});

OR

$('#tab-featured').live('tap',function(event) {
    $('.home-section').fadeOut('slow', function(){
        $('#home-featured').fadeIn('fast');
    });
});

Upvotes: 0

Related Questions