javascript - 如何使更改选项卡 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);
}