Javascript 使用基本jQuery选项卡时出现淡出/淡出故障

我正在使用jQuery开发一个非常简单的fadeIn/fadeOut选项卡系统，但是，它并不像我希望的那样平滑

这是我的，让您看到它的实际作用

看一下演示。我预计它会彼此淡入淡出，但如果您单击选项卡1>选项卡2>选项卡3，然后返回到选项卡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();
            });
        });

    });

<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>

我的HTML是：

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

    });

<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>

这是一个测试1

这是一个测试2

这是一个测试3

---

非常感谢您的指点：-）

如果您希望它们在彼此的顶部淡入淡出，那么您必须将它们放置在彼此的顶部。否则，在文档的正常流程中，它们彼此相邻，因此您会看到一种奇怪的行为，即新项目从一侧开始，然后在消失的项目最终设置为

display:none

时向左滑动。尝试使用

position:absolute

将项目放置在彼此的顶部。然后淡入/淡出应该执行您想要的操作。

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

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

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

我已经更新了你的小提琴。使用正确的代码修改

---

在JSFIDLE的css中使用

div{position:absolute；}

而不是

div{float:left；}

---

使用此选项，您的淡出和淡出将同时发生，并且看起来非常平滑。

不是小故障lol，是异步的。只需使用回调函数等待淡出结束：这太棒了！！非常感谢你的帮助。是时候学习更多jQuery了，我想：-）