Javascript 为选项卡式内容添加漂亮的滑动效果

我正在构建一个选项卡式内容区域，我现在需要的是，当打开一个选项卡时，它能有一个很好的滑动效果吗

$('#feature-tabs li').on('click', 'a', function(e) {
    e.preventDefault();
    var clicked = $(this);
    var tab_id = clicked.attr('data-tab');

    if(clicked.parent().hasClass('active-tab')) {
        clicked.parent().removeClass('active-tab');
        clicked.children('img').toggleClass('hide-logo');
        $('#' + tab_id).removeClass('active-feature-tab-item');

    } else {
        $('.feature-tabs li').removeClass('active-tab');
        $('.feature-tab-item').removeClass('active-feature-tab-item');
        $('.feature-tabs a img:nth-child(1)').removeClass('hide-logo');
        $('.feature-tabs a img:nth-child(2)').addClass('hide-logo');

        $('.feature-tabs a[data-tab=' + tab_id + ']')
        .parent().addClass('active-tab');

        $('.feature-tabs li a[data-tab=' + tab_id + '] img').toggleClass('hide-logo');

        $('#' + tab_id).addClass('active-feature-tab-item');
    }
});

以下是html：

<ul id="feature-tabs" class="feature-tabs">

    <li>
        <a href="#" data-tab="tab-1">
            <img src="<?php echo $this->getThemePath(); ?>/images/logos/llanrhidian-tab-logo.png" alt="">
            <img src="<?php echo $this->getThemePath(); ?>/images/logos/llanrhidian-tab-logo-mono.png" alt="" class="hide-logo">
        </a>
    </li>
    <li>
        <a href="#" data-tab="tab-2">
            <img src="<?php echo $this->getThemePath(); ?>/images/logos/greenmeadow-tab-logo.png" alt="">
            <img src="<?php echo $this->getThemePath(); ?>/images/logos/greenmeadow-tab-logo-mono.png" alt="" class="hide-logo">
        </a>
    </li>
    <li>
        <a href="#" data-tab="tab-3">
            <img src="<?php echo $this->getThemePath(); ?>/images/logos/gower-events-tab-logo.png" alt="">
            <img src="<?php echo $this->getThemePath(); ?>/images/logos/gower-events-tab-logo-mono.png" alt="" class="hide-logo">
        </a>
    </li>
    <li>
        <a href="#" data-tab="tab-4">
            <img src="<?php echo $this->getThemePath(); ?>/images/logos/purplebadger-tab-logo.png" alt="">
            <img src="<?php echo $this->getThemePath(); ?>/images/logos/purplebadger-tab-logo-mono.png" alt="" class="hide-logo">
        </a>
    </li>

</ul>

<div class="feature-tab-content">

    <div id="tab-1" class="feature-tab-item">
        <h2>Title 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, perferendis velit! Voluptatum veritatis tenetur quibusdam molestiae possimus incidunt, nesciunt ab!</p>
    </div>

    <div id="tab-2" class="feature-tab-item">
        <h2>Title 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, perferendis velit! Voluptatum veritatis tenetur quibusdam molestiae possimus incidunt, nesciunt ab!</p>
    </div>

    <div id="tab-3" class="feature-tab-item">
        <h2>Title 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, perferendis velit! Voluptatum veritatis tenetur quibusdam molestiae possimus incidunt, nesciunt ab!</p>
    </div>

    <div id="tab-4" class="feature-tab-item">
        <h2>Title 4</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, perferendis velit! Voluptatum veritatis tenetur quibusdam molestiae possimus incidunt, nesciunt ab!</p>
    </div>

</div>

标题1
Lorem ipsum dolor sit amet，奉献精英。身份证，请出示证件！事实上，这是一种犯罪行为

标题2
Lorem ipsum dolor sit amet，奉献精英。身份证，请出示证件！事实上，这是一种犯罪行为

标题3
Lorem ipsum dolor sit amet，奉献精英。身份证，请出示证件！事实上，这是一种犯罪行为

标题4
Lorem ipsum dolor sit amet，奉献精英。身份证，请出示证件！事实上，这是一种犯罪行为

有什么方法可以改进我的javascript吗？我还想在标签内容中加入滑动效果

---

这是我更新的

您可以使用css3添加幻灯片效果。我已经修改了你的css和html 以下是scss：

.feature-tab-content{
  position: relative;
  padding: 0 40px;
}
.feature-tab-item {
    position: absolute;
    left: 0px;
    right: 0px;
    width: 100%;
    div{
      padding: 20px;
    }
    background:blue;
    color:white;
    max-height: 0;
    padding:0;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    &.active-feature-tab-item {
      -webkit-transition: all 0.8s 0.5s ease-out;
      -moz-transition: all 0.8s  0.5s ease-out;
      transition: all 0.8s  0.5s ease-out;
      max-height:  160px;
   }
}

检查此链接以获取完整代码-：

---

希望它能对您有所帮助。

非常感谢，您认为我可以改进我的javascript吗，请参阅更新的op codepen。使用css3的幻灯片效果的问题是转换是在高度上完成的，我需要一个灵活的高度值，因为内容会有所不同。只需将

最大高度

值设置得太大即可。它会很酷地解决这个问题，我想我可以使用modenizr提供display none、display block的后备功能