사업부의 기원 높이 얻을

Question

내가 this 같은 기원 높이 현재 높이에서 애니메이션을 원하는

height:130px; 
overflow:hidden; 

사업부의 CSS를 설정,하지만 난 원래 height.one의 가망 방법은 DOM로드 된 이후 얻을 수 없다

이

$(function(){ 
    $('.detail').data('originHeight',$('.detail').height()); 
    $('.detail').css({height:'130px',overflow:'hidden'}) 
}) 

하지만이 일을 같이 JS의 높이를 저장 사업부가 먼저 표시됩니다 다음, 130 x 96 픽셀로 높이를 설정합니다.

제안 사항?

Answer 1

이전에 요소의 scrollHeight 속성을 사용하여이를 수행했습니다.

document.getElementById('element').scrollHeight; 

이 높이가 auto로 설정하고 overflow이 활성화 된 경우 요소는 것이 얼마나 키가 당신을 알려줍니다.

Answer 2

대신 CSS 속성을 제거하여 div를 확장 할 수 없습니까?

$('.detail').css({height:'', overflow:''}) 

Answer 3

나는 유일한 방법이라고 생각합니다. 왜냐하면 jQuery에서 CSS를 사용하여 높이를 수정하면 높이가 수정 된 높이가되기 때문입니다. 수정 된 높이가 사용자가 액세스 할 수있는 높이입니다.

내가 생각할 수있는 유일한 시나리오는 jquery를 사용하여 원래 높이를 저장하거나 고정 된 높이를 제공하고 jQuery에 확장 시간을 지정하는 것입니다.

Answer 4

가지고있는 방법은 옳은 방법이지만, 시각적 인 깜박임을 피하려면 해킹이 필요할 수 있습니다.

div를 화면 밖으로 이동하고 높이를 확인한 다음 뒤로 이동해보십시오. 또한 우리가 여기있는 동안 가능한 경우 여러 개의 jQuery 검색을 사용하지 마십시오. $('.detail') 이것은 상당히 비싼 작업 일 수 있습니다.

var $detail = $('.detail'); 
$detail 
    .css({position : 'absolute', left: '-10000px'}) 
    .data('origHeight', $detail.height()) 
    .css({position : '', left : '', height : '130px', overflow : 'hidden'}) 
; 

또는이 방법이 효과가 없다면 작동하지 마세요. 예를 들어 전체 크기로 시작한 다음 다시 130px로 애니메이션을 적용하는 등 디자인에 적용 할 수있는 방법을 고려해 볼 수도 있습니다. 이렇게하면 정상적인 크기를 정상적으로 확인하고 사용자가 더 많은 정보가 있음을 알릴 수 있습니다.