javascript - jQuery .height() は、表示されている場合は 0 を返しますが、非表示の場合は 0 以外を返します

Question

私はここで他の人と同じように問題を抱えています.jQueryでは、要素が表示されているときは要素の高さを取得できませんが、非表示のときは要素の高さを取得できません。私はこのHTMLコードを持っています:

<div id="filtering-filter-holder">
    <div id="filtering-filter-holder-inner"></div>
</div>

そのための基本的な CSS:

#filtering-filter-holder {
    display: none;
    position: absolute;
    width: 420px;
    min-height: 100px;
    padding: 5px 5px 5px 5px;
    background-color: #ffffff;
    border: 1px solid #164372;
}

最後に、document.ready() の JS:

$('div.filtering-filter-headline').mouseenter(function() {
    var el = $(this).parent().find('div.filtering-filter-content');

    if ($('div#filtering-filter-holder').is(':visible')) {
        $('div#filtering-filter-holder-inner').stop(true, true).fadeOut(300, function() {
            $('div#filtering-filter-holder-inner').html($(el).html());
            var height = $('div#filtering-filter-holder-inner').height();
            $('div#filtering-filter-holder').stop(true, true).animate({ height:height }, 300);
        }).fadeIn(300);
        $('div#filtering-filter-holder').stop(true, true).animate({ left: $(this).offset().left }, 300);
    }
    else {
        $('div#filtering-filter-holder-inner').html($(el).html());
        $('div#filtering-filter-holder').css({ top: ($(this).offset().top + 22), left: $(this).offset().left });
        $('div#filtering-filter-holder').fadeIn(300);
        $('div#filtering-filter-holder-inner').fadeOut(1, function() {
            var height = $('div#filtering-filter-holder-inner').height(); // not working without hidding this element
            $('div#filtering-filter-holder').height(height);
        }).fadeIn(1);
    }
});

が表示されている場合filtering-filter-holder、いくつかのアニメーションが追加されます。そうでない場合は、初期設定が必要です。ただし、要素が display: ブロックの場合、filtering-filter-holder-inner の高さを取得できず、事前に非表示にする必要があります。私が悪いことをしたのは不思議です-Googleが言うように、開発者は反対の問題を抱えています。

最初に要素を非表示にする必要がある理由を知りたいです。

jQuery と jQueryUI の両方がページに読み込まれるため、両方を使用できます。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

例は次のとおりです：http://jsfiddle.net/tomis/jDWbK/