블록 높이에 0에서 자동으로 애니메이션 적용

Question

.animate를 사용하여 애니메이션을 만들려고합니다. 블록 높이가 0px가되도록 CSS를 사용했습니다.

일반적으로

블록 높이를 (값이 설정되지 않은 경우 I, 그것은 자동 믿지?)이없는,하지만 블록은 콘텐츠를 가지고있다. 그래서 높이는 그 안에있는 것에서옵니다.

블록의 높이를 0으로 지정하여 자동으로 표시하도록하려고합니다.

.panelContainer { 
    height: 0; 
    overflow: hidden; 
} 

및

(document).ready(function(){ 
    $(".panelContainer").animate({ 
     height: "auto" 
    }, 1000); 
}); 

그러나

어떻게 든 내 블록의 높이가 변경되지 않습니다 : 그래서 이런 짓을.

Answer 1

정말로 원하는 것은 .slideToggle()입니다. 정확히 찾고있는 애니메이션의 종류입니다. documentation 가입일

$('.panelContainer').slideToggle(); 

는 :

.slideToggle()있어서 정합 소자의 높이를 애니메이션. 이렇게하면 페이지의 아래쪽 부분이 위로 이동하거나 아래로 이동하여 으로 나타나 항목을 표시하거나 숨 깁니다.

Answer 2

시도 대신 height: toggle를 사용 :

$(document).ready(function(){ 
    $(".panelContainer").animate({ 
     height: "toggle" 
    }, 1000); 
}); 

Answer 3

난 당신이 .slideDown() 기능을 원하는 생각합니다. 사이트가 다운 panelContainer 슬라이드를 올 때 jsFiddle

$(document).ready(function(){ 
    $('.panelContainer').slideDown(1000); 
}); 

:
나는 이미 바이올린 파일을 만들었습니다.