요소의 높이를 가져 오는 문제

Question

jQuery를 사용하여 요소의 높이를 가져 오려고하지만 어떤 이유로 항상 0을 반환합니다.

컨테이너에 ajax를 사용하여 콘텐츠를로드합니다. 이 콘텐츠는 기본적으로 숨겨져 있습니다 (display: none). 내용을 표시하기 전에 새 내용의 요소 높이를 검색해야합니다.

어느 쪽이 should work.

내 간단한 코드 :

success: function(data) // this is the success callback of jquery's ajax call 
{ 
    var content = $('#content'); 
    content.fadeOut('slow', function() { 
    content.html(data.html); 
    set_comments_height(); 
    content.fadeIn('slow'); 
    }); 
} 

function set_comments_height() 
{ 
    var content = $('#content'); 
    var info = $('.trackinfo .artwork-and-info', content); 

    console.log(parseInt(info.outerHeight(true), 10)); 
} 

당신은 왼쪽에 트랙을 클릭 한 후 my website에 문제를 볼 수 있습니다.

여기에 뭔가가 누락되었을 수 있지만 올바른 높이가 표시되지 않는 이유는 알 수 없습니다.

Answer 1

outerHeight()은 display 속성이 none으로 설정된 요소의 경우 0을 반환합니다. 이 문제를 해결하려면 AJAX의 성공 처리기에서 html을 설정하기 전에 요소의 opacity을 0 및 display에서 block으로 설정합니다 (여전히 불투명도가 0으로 표시되지 않음). html로가 설정되면, set_comments_height 전화()는 CSS 애니메이션 다음 기능이 숨겨진 요소와 작동하지 않습니다 opacity: 1

즉

success: function(data) // this is the success callback of jquery's ajax call 
{ 
    var content = $('#content'); 
    content.fadeOut('slow', function() { 

    // opacity -> 0 and display -> block 
    content.css({'opacity': 0, 'display': 'block'}); 

    content.html(data.html); 
    set_comments_height(); 

    // instead of fadeIn, use CSS animation to bring it to opacity 1 
    content.animate({'opacity': 1}, 'slow'); 

    }); 
}