javascript - jQuery Animations 在开始他们的 Complete 之前不要等待

Question

我一直致力于在导航栏中点击淡入和淡出 div，但我无法让动画功能的“完整”输入正常工作。我的解决方案是增加延迟(我提供了代码和一个 JSFiddle)，但这对我来说似乎是一个糟糕的解决方案。我想知道是否有人可以向我解释 .fadeIn() 和 .fadeOut() 之类的“完整”输入？

我使用了以下示例，发现淡入会在淡出完成之前开始，导致 div 跳跃，我试图避免这种情况。

$(function () {
    $('#tabCarts').click(function () {
        $('div[id^="body"]').fadeOut(140, function () {
            $('#bodyCarts').fadeIn(140);
        });
    });
    $('#tabSearch').click(function () {
        $('div[id^="body"]').fadeOut(140, function () {
            $('#bodySearch').fadeIn(140);
        });
    });
    $('#tabRequests').click(function () {
        $('div[id^="body"]').fadeOut(140, function () {
            $('#bodyRequests').fadeIn(140);
        });
    });
});

这是我用来演示的基本标记。

<ul>
    <li><a href="#" id="tabCarts"> Carts</a>

    </li>
    <li><a href="#" id="tabSearch"> Search</a>

    </li>
    <li><a href="#" id="tabRequests"> Requests</a>

    </li>
</ul>
<div id="bodyCarts" class="bodyTab">Carts</div>
<div id="bodySearch" class="bodyTab">Search</div>
<div id="bodyRequests" class="bodyTab">Requests</div>

这是我的 JSFiddle Entry这样你就可以明白我在说什么了。

我的解决方案包括在淡入开始之前加入延迟，并让它们同时运行，但这对我来说是一个糟糕的答案。

感谢您的回答!

Answer 1

过早触发回调的原因是您将隐藏动画绑定(bind)到已经隐藏的元素。其中一些立即完成。

要解决此问题，您需要通过 $('div[id^="body"]:visible') 选择器仅选择可见元素。

这里还有一个陷阱。由于您现在只选择可见元素，因此至少其中一个元素首先需要可见。这就是为什么我将额外的淡入放在开头。

http://jsfiddle.net/RdwUS/5/

$(function () {
    $('#bodyCarts').fadeIn(140);
    $('#tabCarts').click(function () {
        $('div[id^="body"]:visible').fadeOut(140, function () {
            $('#bodyCarts').fadeIn(140);
        });
    });
    $('#tabSearch').click(function () {
        $('div[id^="body"]:visible').fadeOut(140, function () {
            $('#bodySearch').fadeIn(140);
        });
    });
    $('#tabRequests').click(function () {
        $('div[id^="body"]:visible').fadeOut(140, function () {
            $('#bodyRequests').fadeIn(140);
        });
    });
});