根据Bootstrap选项卡的内容为div的高度设置动画

Question

我想知道如何在我正在工作的网站上取得特定效果。

我目前所拥有的是一个部分。在其中我有Bootstrap标签，但不是顶部的传统标签，下面的内容，我已选择左侧的标签，右侧的内容。

右侧内容面板中的内容量会有所不同，最终该部分​​的高度会相应增加和减少。因此标签内容会影响该部分的高度。

理想情况下，我想要发生的事情是，当部分变化而不是在不同高度之间快速跳跃时，部分的高度会变得缓和。我不确定是否必须将某些内容绑定到标签脚本，或者是否可以在没有它的情况下完成。

我已经快速模拟了我的意思。

有人可以帮帮忙吗？谢谢

编辑下面的标记和JS Fiddle Here

<section class="tabs" id="project-tabs">

<div class="container">

<div class="row">

<div class="col-xs-12 col-sm-6">

    <div class="bs-example bs-example-tabs">
    <ul id="myTab" class="nav nav-tabs">
     <li class="active"><a href="#one" data-toggle="tab">Tab One</a></li>
     <li><a href="#two" data-toggle="tab">Tab Two</a></li>
    </ul>   
</div>

</div><!-- /.col-6-->

<div class="col-xs-12 col-sm-6">

<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade in active" id="one">
    <p>Lot of content</p>
  </div>


  <div class="tab-pane fade" id="two">
    <p>Less Content</p>
  </div>
</div>



</div><!-- /.col-6-->


</div><!-- /.row-->
</div><!-- /.container-->
</section>


<script>
var section = $("#project-tabs"),
curHeight = section.height(),
autoHeight = section.css('height', 'auto').height();

section.height(curHeight).animate({ height: autoHeight }, 1000, function() {

section.css('height', 'auto'); 
});
</script>