充滿

Question

的時候，這裏的jQuery動畫的div是什麼，我有一個非常簡單的例子：http://jsfiddle.net/MxKLU/

點擊DIV space內的鏈接space-one和space-two和內容將發生變化。當內容越來越大並且比前一個內容更小時，這將導致紅色背景看到一個嘎嘎聲。我正在尋找一種方法來動畫div space的高度，以避免發生此類刺耳現象。任何幫助將不勝感激。

Answer 1

我會做這樣的

$("#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/

Answer 2

希望它可以幫助你。

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

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

Answer 3

我的命題： http://jsfiddle.net/dxvEr/3/

它並不需要在這個過程中間改變高度爲0。

我已經添加了另一個div。外部div有溢出：隱藏和靜態高度，所以它不會對其內容的變化做出反應，但我們檢查內部div高度並使用動畫將外部div設置爲相同高度。