javascript - DIVを部分的に表示および非表示にする

Question

DIVを完全にではなく、部分的に非表示にする必要があります。ページが読み込まれるときに、最初の、たとえばdivの最上部にある100ピクセルを表示したいと思います。ユーザーが特定のボタンをクリックすると、divが開きます（jQueryのshow（）のようなスライド効果である可能性があります）。ユーザーが同じボタンをクリックすると、divは元の状態に戻り、上位100ピクセルのみが表示されます。jQueryを使用してこれを行う方法を理解しようとしています。これは、jQueryがそれを行うための最良の方法であると思われるためです。ヒントはありますか？ありがとうございました。

Answer 1

これは、divの初期の高さを100pxに設定し、そのオーバーフローをCSSで非表示に設定することで実行できます。次に、JavaScriptボタンのクリックで完全なdivを表示するときに、divの高さをautoに変更できます。

例：http ：//www.quirksmode.org/css/overflow.html

CSSコード：

overflow : hidden;

Answer 2

トグルメソッドといくつかのアニメーション、jqueryスタイルが必要になります：

Cssを使用してdivの高さを10pxに設定します。

$("td").toggle(
  function () {
    $(this).animate( { height:"100px" } , 1000 )
  },
  function () {
     $(this).animate( { height:"10px" } , 1000 )
  }
);