web-dev-qa-db-ja.com

jQueryアニメーションの高さ

私はいくつかのテキストの中にボタンとdivを持っています：

<h2>Click me</h2>
<div class="expand">Lot of text here....</div>

デフォルトではテキストを2行だけ表示したいので、高さを30pxにして、非表示にしました。

H2要素をクリックすると、テキストをSlideDownにアニメーション化し、別の時間にクリックすると、デフォルトの高さ（30px）にSlideUpします。

私はjQueryで多くのことを試みていますが、機能しません。

編集：

また、「エキスパンド」と「H2」が複数あり、テキストがdivと異なるため、高さが固定されていません...「自動」の高さまたは100％にスライドしたいと思います。

誰かが私を助けてくれますか？ありがとう！

jqueryanimationslide
18
Andrea Turri

ページの読み込み時に高さを30pxにスリム化する直前に保存できます。次に例を示します。

_$(".expand").each(function() {
  $.data(this, "realHeight", $(this).height());
}).css({ overflow: "hidden", height: "30px" });
_

次に、clickハンドラーで：

_$("h2").toggle(function() {
  var div = $(this).next(".expand")
  div.animate({ height: div.data("realHeight") }, 600);
}, function() {
  $(this).next(".expand").animate({ height: 30 }, 600);
});
_

つまり、これは .height() （これを_document.ready_で実行）beforeを取得することです_overflow: hidden_設定し、 $.data() を介して保存し、次にclickハンドラーに（ .toggle()）を介して =交互に）、その値（または30）を1回おきにクリックして .animate() toにします。

27
Nick Craver

DOM要素のscrollHeightプロパティも、必要な高さを提供します。

$(".expand").animate({
    height : $(".expand")[0].scrollHeight
},2000);

実際の例は http://jsfiddle.net/af3xy/4/ にあります

5
Torin Finnemann

このスレッドは最新ではありませんが、別のアプローチがあります。

私は今日同じ問題に対処してきましたが、適切に機能させることができませんでした。 _height: auto_を適用して計算した正しい高さでも、アニメーションでは正しい結果が得られません。 $(window).loadの代わりに$(document).readyに入れてみましたが、少しは役に立ちましたが、それでもテキストの最後の行が切り取られました。

高さ自体をアニメーション化する代わりに、hiddenクラスをdivに動的に追加および削除することで問題を解決できました。 _jQuery-UI_を使用する場合、これらの効果に期間を適用できます。これはすべてのブラウザでも機能するようです。

これが実際の例です。

2
Jules