为更改选项卡添加淡入淡出？答案

【问题标题】：Adding fade to changing tabs?为更改选项卡添加淡入淡出？
【发布时间】：2014-02-12 16:45:26
【问题描述】：

所以我对一些内容使用了标签系统，但想稍微动画一下。事实上，这些选项卡完全按照它们应该的方式工作。单击一个选项卡，内容发生变化。多田！但是，我想知道的是，是否有可能让选项卡淡入视图而不是仅仅弹出，并且当 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)），但我得到的结果......不好。我让菜单随机消失，标签完全消失，我的一只猫呕吐了。不知道那是否有联系，公平地说。

有没有人可以在这里举手？提前非常感谢。

【问题讨论】：

我会将 CSS3 过渡应用于样式更改。不需要编写脚本。把你的例子放在小提琴中，我们来看看。 jsfiddle.net
我实际上有点想通了，如下面的代码所示。唯一的问题是 div 并不能很好地适应内容，但它也不可怕。淡入淡出部分有效。我担心仅仅因为 IE 而使用转换。我们的很多访问者都在使用旧版本的 IE，所以我必须尝试支持大约 8 个版本。任何更早的版本，他们都可以接受。 :D

标签： jquery tabs fade

【解决方案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();
                });
            });
        });

哇！学习！

【讨论】：