のdivの原点の高さを取得

Question

私は thisのような原点高さに現在の高さからアニメーションを使用し

height:130px; 
overflow:hidden; 

のdivのCSSを設定するが、私は原点height.oneのとりうる道は、DOMロードされた後で取得することはできません

この

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

が、これを行うように、JSでの高さを格納し、div要素は最初にすべてが表示されます、そして130pxに高さを設定します。

提案がありますか？

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にアニメーション化するなど、デザインに合わせて調整する方法を検討することができます。これにより、通常のサイズを正常に確認できるだけでなく、そこに表示される情報が増えていることをユーザーに知らせることができます。