javascript - jQuery 动画在开始完成之前不会等待

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') 选择器仅选择可见元素。

这里还有一个问题。由于您现在仅选择可见元素，因此至少其中一个需要首先可见。这就是为什么我在开头添加了额外的 fadeIn。

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