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

这是docs。

这可能是fadeOut() / fadeIn()中的错误，因为您的家庭功能也是家庭版。尝试解决这个问题：

$('.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);
    });
});

OR

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

jQuery：在另一个完成后运行一个函数

2 个答案: