jquery - jQuery-上にスライドする代わりに下にスライドする

Question

jsFiddleと同じようにする方法ですが、違いは、緑色のボックスが下にスライドして消える（そして、例click hereのリンクをもう一度クリックすると上にスライドして表示される）ことです。

2つの文字列

/*position:absolute;*/
/*bottom:0px;*/

jsFiddleのcss部分でコメントされているものは、実際に下にスライドし始めるため、コメントを外すとうまく機能しませんが、ブラウザのスクロールバーが消えます-良くありません。

Answer 1

編集：

スライダーラッパーでを追加<div>し、以下のように幅を指定します。id 100%

<div width="100%" id="sliderWrapper">        
    <div id="slider" style="border:1px solid red;">
        <h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1><h1>F</h1>

        <h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1><h1>E</h1>

        <h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1><h1>D</h1>

        <h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1><h1>C</h1>

        <h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1><h1>B</h1>

        <h1>A</h1><h1>A</h1><h1>A</h1><h1>A</h1><h1>A</h1>

         <h1>6</h1><h1>7</h1><h1>8</h1><h1>9</h1><h1>10</h1>
    </div>
</div>

のcssルールに従ってください#slider

  #slider {
      background : green;             
      width:100px;
      margin:20px auto 0 auto;
   }

次の行を次の行に置き換えます$('#slider').slideToggle(500)

 if(hid) { $('#sliderWrapper').show("slide", { direction:"down" }, 500);} 
 else { $('#sliderWrapper').hide("slide", { direction:"down" }, 500); }

デモを見る

Answer 2

jsFiddleを編集しました！jquery.slideToggle（）;を使用しました 正しいスライド方向を取得するためのいくつかのCss！

jsFiddle