私はいくつかのテキストの中にボタンとdivを持っています:
<h2>Click me</h2>
<div class="expand">Lot of text here....</div>
デフォルトではテキストを2行だけ表示したいので、高さを30pxにして、非表示にしました。
H2要素をクリックすると、テキストをSlideDownにアニメーション化し、別の時間にクリックすると、デフォルトの高さ(30px)にSlideUpします。
私はjQueryで多くのことを試みていますが、機能しません。
編集:
また、「エキスパンド」と「H2」が複数あり、テキストがdivと異なるため、高さが固定されていません...「自動」の高さまたは100%にスライドしたいと思います。
誰かが私を助けてくれますか?ありがとう!
ページの読み込み時に高さを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にします。
DOM要素のscrollHeight
プロパティも、必要な高さを提供します。
$(".expand").animate({
height : $(".expand")[0].scrollHeight
},2000);
実際の例は http://jsfiddle.net/af3xy/4/ にあります
このスレッドは最新ではありませんが、別のアプローチがあります。
私は今日同じ問題に対処してきましたが、適切に機能させることができませんでした。 _height: auto
_を適用して計算した正しい高さでも、アニメーションでは正しい結果が得られません。 $(window).load
の代わりに$(document).ready
に入れてみましたが、少しは役に立ちましたが、それでもテキストの最後の行が切り取られました。
高さ自体をアニメーション化する代わりに、hiddenクラスをdivに動的に追加および削除することで問題を解決できました。 _jQuery-UI
_を使用する場合、これらの効果に期間を適用できます。これはすべてのブラウザでも機能するようです。