javascript - ホバリング時の要素の高さを一時的に調整する

Question

高さが制限された<h3>タグ (例: 100 ピクセル、位置: 絶対) があり、テキストがオーバーフローします。

私がやりたいのは、マウスがその上にあるときに必要な高さまでスライドさせ、元の高さ (100px) に戻すことです。
私が言いたいことを理解していただければ幸いです

そのためにslidedown（）関数を使用しているとは思わず、アニメーション機能が非常に苦手です。何か助けてください。

Answer 1

コンテンツを含む h3 内に div をネストし、h3 をマスキング コンテナーとして使用できます (overflow:hidden を使用)。ユーザーがマウスオーバーすると、内側の div の高さを取得する関数が起動されます (マージンやパディングが含まれていることを確認してください)。次に、高さ調整アニメーション関数を実行します（jqueryでは、のようなものです$('h3').animate({height: heightVar});）マウスアウトは、h3の高さを100pxに戻す関数を起動します。

サンプルは次のとおりです: http://jsfiddle.net/XR9fb/

Answer 2

プロパティを使用して、要素の実際の高さを取得できscrollHeightます。さて、私はjQueryについてあまり知りませんが、animateを呼び出してscrollHeight、マウスがホバーしたときに高さCSSプロパティを要素に設定し、マウスがそこから移動すると元の高さに戻ることができると思います.

要素の高さが固定されていない場合は、要素全体を表示する前に現在の高さをどこかに保存することができます。マウスが要素から離れると、この状態が復元されます。