1

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

这是我的演示，供您查看它的实际应用。

看看演示。我希望它会相互淡入和淡出，但是如果您单击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>

非常感谢任何指针:-)

4

3 回答 3

2

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

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

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

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

http://jsfiddle.net/R8yQV/

于 2013-04-25T12:54:14.217 回答
0

如果您希望它们彼此重叠淡入淡出，则必须将它们彼此重叠放置。否则，它们会在文档的正常流程中彼此相邻放置，因此您会遇到奇怪的行为，即新项目从一侧开始，然后在消失的项目最终设置为时向左滑动display: none。尝试使用position: absolute将项目放置在彼此的顶部。然后淡入/淡出应该做你想要的。

于 2013-04-25T12:52:44.223 回答
0

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

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

于 2013-04-25T13:26:12.040 回答