javascript - 使用基本 jQuery 选项卡的 FadeIn/FadeOut 故障

Question

我正在使用 jQuery 开发一个非常简单的淡入/淡出选项卡系统，但是，它并不像我希望的那样流畅。

这是我的 DEMO 让您看到它的实际效果。

看看演示。我原以为它会彼此淡入淡出，但如果您点击 Tab 1 > Tab 2 > Tab 3 然后返回Tab 1，就会出现奇怪的淡入/沿途排除故障。

有什么办法可以解决这个问题吗？我的 jQuery 是:

$(document).ready(function(){

        $('ul.tabs').each(function(){

            var $active, $content, $links = $(this).find('a');

            $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
            $active.addClass('active');
            $content = $($active.attr('href'));

            $links.not($active).each(function () {
                $($(this).attr('href')).hide();
            });

            $(this).on('click', 'a', function(e){

                $active.removeClass('active');
                $content.fadeOut("slow");

                $active = $(this);
                $content = $($(this).attr('href'));

                $active.addClass('active');
                $content.fadeIn("slow");

                e.preventDefault();
            });
        });

    });

我的 HTML 是:

<ul class="tabs">
    <li><a href="#tab1">Overview</a></li>
    <li><a href="#tab2">Sub Nav 2</a></li>
    <li><a href="#tab3">Sub Nav 3</a></li>
</ul>

<div id="tab1">
    <p>this is a test 1</p>
</div>
<div id="tab2">
    <p>this is a test 2</p>
</div>
<div id="tab3">
    <p>this is a test 3</p>
</div>

非常感谢任何指点:-)

Answer 1

您需要在淡出结束后让代码回调。目前，代码将在淡出完成之前执行淡入。为了级联调用，您可以提供一个函数作为 fadeOut 的第二个参数。 .此函数将在函数完成其动画后立即调用。在我的例子中，我提供了一个匿名函数来执行剩余的代码。

$content.fadeOut("slow", function()
                                 {
                                     $active = $(c);
                                     $content = $($(c).attr('href'));

                                     $active.addClass('active');
                                     $content.fadeIn("slow");
                                 });

我已经更新了你的 fiddle 。通过正确的代码修改。

http://jsfiddle.net/R8yQV/