2

CSS で最小高さが 300px に設定された要素があります。

<!-- HTML -->
<div id="summary"></div>
<div id="collapse"></div>
/* CSS */
#summary { min-height: 300px }

#collapse要素をクリックすると、要素#summaryが 100px の高さまでスムーズに折りたたまれます。

$("#collapse").click(function() {
   $("#summary").animate({ height: 100}, 1000);
});

しかし、何も起こっていません。min-height プロパティが原因だと思います。

jQueryフォーラムでこの議論を読みましたが、divをスムーズにアニメーション化する方法がまだわかりません#summary.min-heightをautoに設定すると、divが消えてから再び表示されます. 誰でも助けることができますか？

更新:問題を示すために jsFiddle を作成しました。

4

3 に答える 3

2

あなたは次のようなことをしようとすることができます

$("#collapse").click(function() {
   var summary = $("#summary"),
       height  = summary.height();

   summary
     .css({ height: height + 'px', minHeight: 0 }) 
     .animate({ height: 100}, 1000);
});

アイデアは、をリセットしmin-height、cssheightプロパティをアニメーションの直前の要素自体の計算された高さに設定することです。

于 2013-01-18T09:03:47.847 に答える
2

イベントで高さを100に下げ、最小高さを300にするheight代わりに、cssinで使用する必要があります。min-heightclick

ライブデモ

変化する

#summary { min-height: 300px }

に

#summary { height: 300px; }

min-widthを使用する必要がある場合は、heightではなくanimateでmin-widthを変更する必要があります。

于 2013-01-18T09:03:56.817 に答える
1

フィドルでこれを試してください：http://jsfiddle.net/8jn7v/5/

これを変える：

height: 50

これに：

$('#summary').animate({ 
  'min-height': 50+'px' // <--see the quotes at min-height and add pixels to it
}, 1000);

min-height高さをmin-height

300pxあなたの要素はのために制限されているので、代わりにmin-heightをアニメーション化する必要がありますmin-heightheight

于 2013-01-18T09:06:46.540 に答える