FadeIn / FadeOut使用基本的jQuery选项卡出现故障

Question

我正在使用jQuery 开发一个非常简单的fadeIn / fadeOut标签系统，但是，它并不像我希望的那样顺畅。

以下是我的 DEMO ，供您查看实际操作。

看看演示。我希望它能够淡入淡出，但是如果你点击标签1＆gt;标签2＆gt;标签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();
            });
        });

    });

我的 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");
                                 });

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

http://jsfiddle.net/R8yQV/

Answer 2

如果你希望它们在彼此之上淡入淡出，那么你必须将它们放在彼此之上。否则它们会在文档的正常流程中彼此相邻放置，这样您就可以获得奇怪的外观，其中新项目从侧面开始，然后在消失的项目最终设置为{{1}时向左滑动}。尝试使用display: none将项目放在彼此的顶部。然后淡入/淡出应该做你想要的。

Answer 3

在你的jsfiddle的css中使用{{1>而不是div {float:left;}，使用div{position:absolute;} http://jsfiddle.net/j4eFE/11/

使用此功能，你的fadein和fadeout会同时出现并且看起来非常流畅。