填充时的jQuery动画div

Question

这是我所拥有的非常简单的示例： http : //jsfiddle.net/MxKLU/

单击space-one和space-two的链接，div space的内容将更改。 当内容变得比其前任更大或更小时，这将导致在红色背景下看到震颤。 我正在寻找一种动画div space的高度的方法，以免发生这种震颤。 任何帮助将不胜感激。

Answer 1

希望对您有帮助。

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

演示： http ： //jsfiddle.net/MxKLU/2/

Answer 2

我的主张： http : //jsfiddle.net/dxvEr/3/

它不需要在过程的中间将高度更改为0。

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

Answer 3

我会这样

$("#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-> http://jsfiddle.net/MxKLU/5/