前回にひきつづき、jQueryのSlidingエフェクトについて紹介します。今回は、slideUpメソッドです。

jQueryの取得などについては下記リンクをご参照ください。

slideUp( )

slideUpメソッドは、マッチした要素が可視の場合、slideDownとは逆に、下からアニメーションしつつ不可視化して見えなくします。 (参考:Effects/slideUp )

また、これまでのメソッドと同様、次ページのように、 引数で、アニメーションスピードと、動作完了後に起動させるコールバック関数を指定もできますが、まず、ここでは、引数なしのケースを試します。

とりあえず、簡単なサンプルを作ってみます。ボタンをクリックしてみてください。

my1


ボタンをクリックすると、display:none で不可視化されているdiv要素が表示されます。 コードは次のとおりです。
<div style="height:100px;
              width:100px;
              background-color:#0088ff">my1</div>
<button>不可視化</button>

<script type="text/javascript">
 jQuery(function($){
   $("button","#test1").click(function () { 
     $("div","#test1").slideUp();
   })
 });
</script>
前回同様に、可視化メソッドshow()のボタンを追加してみます。それぞれクリックしてみてください。

my2


不可視化ボタンで消えたdiv要素がshow()ボタンで再度表示されます。 コードは次のとおりです。
<div id="test2">
  <div style="height:100px;
              width:100px;
              background-color:#0088ff">my2</div>
  <button id="btn1">不可視化</button>
  <button id="btn2">show()</button>
</div>
<script type="text/javascript">
 jQuery(function($){
   $("#btn1","#test2").click(function () { 
     $("div","#test2").slideUp();
   });
   $("#btn2","#test2").click(function () { 
     $("div","#test2").show();
   })
 });
</script>


もうひとつ、前回同様に試してみます。 上記サンプルではふたつのボタンで可視/不可視を切り替えましたが、要素の「:hidden」状態を調べて切り替える方法です。

せっかく前回slideDownを試しましたので、今度は、slideUp/showの切り替えではなく、slideUp/slideDownで切り替えてみます。

my3


スイッチボタンを何度も押すと、slideUp()とslideDown()が交互に動作して、可視/不可視が切り替わります。 コードは次のとおりです。

<div id="test3">
  <button id="btn3">スイッチ</button>
  <div style="display:none;
              height:100px;
              width:100px;
              background-color:#0088ff">my3</div>
</div>
<script type="text/javascript">
 jQuery(function($){

   var target=$("div","#test3"); 

   $("#btn3").click(function () {
     if (target.is(":hidden")) {
        target.slideDown();
     } else {
        target.slideUp();
     }
   })
 });
</script>


では、次ページでは、このslideUpメソッドに第1引数を渡してみます。