jQuery在填充时设置div动画

下面是一个非常简单的例子：

单击链接

space one

和

space two

，div

space

中的内容将更改。当内容比前一个内容变大变小时，这将导致红色背景出现震动。我正在寻找一种方法来设置div

space

的高度动画，这样就不会发生这种抖动。任何帮助都将不胜感激。

希望对您有所帮助

$('a[id^="space"]').click(function(){
      $('div#space div').hide();
      $('#space, #'+$(this).text()).slideDown();
 });

演示：

我的建议：

不需要在过程中间将“高度”更改为0

我添加了另一个div。外部div有溢出：隐藏和静态高度，因此它不会对其内容的更改做出反应，但我们检查内部div高度，并使用动画将外部div设置为相同的高度。

我会这样做

$("#space").css("height",$(".selected").height());

$('#space-one-appear').click(function(){
    $('#space-one').attr('class','selected');
    $('#space-two').attr('class','unselected');
    $("#space").animate({height:$(".selected").height()}, 500);
});

$('#space-two-appear').click(function(){
    $('#space-two').attr('class','selected');
    $('#space-one').attr('class','unselected');
    $("#space").animate({height:$(".selected").height()}, 500);
});

jsfiddle->