divの原点の高さを取得します

StackOverflow https://stackoverflow.com/questions/827996

  •  06-07-2019
  •  | 
  •  

質問

divのcssを設定します

height:130px;
overflow:hidden;

this のような、現在の高さから原点の高さまでのアニメーションが必要です。しかし、原点の高さを取得できません。可能な方法の1つは、domが読み込まれた後、このように高さをjsに保存することです

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

しかしこれを行うと、divは最初にすべてを表示し、次に高さを130pxに設定します。

提案はありますか

役に立ちましたか？

解決

要素の scrollHeight プロパティを使用してこれを実行したことがあります。

document.getElementById('element').scrollHeight;

これは、高さが auto に設定され、 overflow が有効になっている場合の要素の高さを示します。

他のヒント

お持ちの方法は正しい方法ですが、視覚的なちらつきを避けるためにいくつかのハックが必要になる場合があります。

divを画面外に移動し、高さを確認してから元に戻します。また、ここにいる間は、 $（ '。detail'）が複数のjQueryルックアップを使用することを避けてください。これは非常に高価な操作になる可能性があるためです。

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

別の方法として、これがあなたのために機能しない場合、それに対して動作しないで、それで動作します。たとえば、フルサイズで開始してから130pxにアニメーションを戻すなど、デザインに合わせて調整する方法を検討すると効果的です。これにより、通常のサイズを優雅に確認できるだけでなく、そこに表示される情報がさらにあることをユーザーに知らせることができます。

代わりにcss属性を削除してdivを展開できませんか？

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

それが唯一の方法だと思います。 jQueryでCSSを使用して高さを変更した場合、高さが変更された高さになるためです。そして、変更された高さがアクセスする高さです。

考えられる唯一の可能なシナリオは、jqueryを使用して元の高さを保存するか、固定の高さを指定してjQueryがどれだけ長くなるかを伝えることです。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top