jQuery:一个函数完成后运行另一个函数

Question

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

我尝试在 fadeOut() 完成后使用上面的代码调用 fadeIn()。 fadeOut() 工作正常。我以前曾在其他人完成后运行过函数，但这一次它不起作用，我一生都无法弄清楚为什么。

从他们的 CDN 运行最新的 jQuery。

代码:

<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>

更新:

尝试使用hide而不是fadeOut，效果很好。不确定为什么 fadeOut 不起作用。

Answer 1

动画函数的第一个参数是持续时间，回调是第二个:

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

这是docs .

这可能是 fadeOut()/fadeIn() 中的错误，因为您的主页功能也是主页部分。尝试像这样解决它:

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