如何使更改标签 JS 适应标签更改时的过渡高度？

Question

我有一些代码可以在点击时成功更改一些选项卡。我遇到的问题是选项卡更改时，如果选项卡中的内容高度不同，则下面的内容会在更改时上下跳跃。

我想知道是否有一种方法可以调整我当前的设置以添加某种过渡，以便当点击上方的内容时下方的内容会向上/向下滑动？

任何帮助将不胜感激。提前致谢！

JSFiddle

$(".tab-content .group").hide(); // Initially hide all content
$(".tabs li:first").attr("id","current"); // Activate first tab
$(".tab-content .group:first").fadeIn(); // Show first tab content
$('.tabs li a').click(function(e) {
   e.preventDefault();
   if ($(this).attr("id") == "current"){ //detection for current tab
     return       
   } else{             
     $(".tab-content .group").hide(); //Hide all content
     $(".tabs li").attr("id",""); //Reset id's
     $(this).parent().attr("id","current"); // Activate this
     $($(this).attr('href')).fadeIn(); // Show content for current tab
   }
});

Answer 1

我相信this question has already been answered。这个想法是，您查看当前高度是多少，以及如果设置为自动高度会是多少，然后为差异设置动画。见这里：http://jsfiddle.net/zbB3Q/

$('button').on('click', function(){
    setContainerHeight();
});


function setContainerHeight() {
    var heightnow=$(".pagecontainer").height();
    var heightfull=$(".pagecontainer").css({height:'auto'}).height();

    $(".pagecontainer").css({height:heightnow}).animate({
        height: heightfull
    }, 500);
}