jQuery:运行一个又一个函数完成

Question

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

我正在尝试使用上面的代码在fadeIn()完成后调用fadeOut()。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();
});

这是文档。

这可能是fadeOut() / fadeIn()中的一个bug，因为您的家庭功能也是一个主页部分。试着像这样做：

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

Answer 2

你需要通过持续时间

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

或

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