填充時的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/