要素の高さを取得する問題

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'); 

    }); 
}