Question

所以我正在为一些内容使用制表符系统，但是想稍微动画一下。实际上，标签的工作方式完全正常。单击选项卡，内容更改。田田！但是，我想知道的是，是否可以让选项卡淡入视图而不是仅仅弹出，当div的内容增大或缩小时，它会在这样做时动画化。

这是我正在使用的代码：

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

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

                    $active.addClass('active');
                    $content.show();

                    // Prevent the anchor's default click action
                    e.preventDefault();
                });
            });
        });

我已经尝试引用我之前关于淡出事物的一些问题.removeclass，但这没有成功。到目前为止，我已经尝试添加我认为可以工作的各种位（.addclass上的.fadeIn（500））但是我的结果是......不好。我让菜单随机消失，标签完全消失，我的一只猫呕吐了。不确定是否连接，但公平。

有人能在这里降落吗？非常感谢提前。

Answer 1

弄明白，想出来了！我注意到它使用.show所以我用.fadeIn替换它并且它有效！

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

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

                    $active.addClass('active');
                    $content.delay(300).fadeIn(500);

                    // Prevent the anchor's default click action
                    e.preventDefault();
                });
            });
        });

活泉！学习！

添加淡入淡出更改标签？

1 个答案: