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所以你可以看到我在说什么。

我的解决方案涉及在fadeIn开始之前放入延迟，让它们同时运行，但这对我来说感觉不好。

感谢您的回答！

Answer 1

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

要解决此问题，您只需按$('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);
        });
    });
});

jQuery Animations在开始完成之前不要等待

1 个答案: