【Javascript】jQueryのFadingエフェクト2

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

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

• jQuery
  • jquey.jsのダウンロード
• jQuery ドキュメント API/1.2/Effects
• jQueryのダウンロードと設置

fadeOut( )

fadeOutメソッドは、マッチした要素が可視の場合、fadeInとは逆にフェイドアウトして見えなくします。 (参考:Effects/fadeOut )

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

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



ボタンをクリックすると、display:none で不可視化されているdiv要素が表示されます。 コードは次のとおりです。

<div style="height:100px;
              width:100px;
              background-color:#ffda10">my1</div>
<button>フェイドアウト</button>

<script type="text/javascript">
 jQuery(function($){
   $("button","#test1").click(function () { 
     $("div","#test1").fadeOut();
   })
 });
</script>

前回同様に、可視化メソッドslideDown()のボタンを追加してみます。それぞれクリックしてみてください。



不可視化ボタンで消えたdiv要素がslideDown()ボタンで再度表示されます。 コードは次のとおりです。

<div id="test2">
  <div style="height:100px;
              width:100px;
              background-color:#ffda10">my2</div>
  <button id="btn1">不可視化</button>
  <button id="btn2">slideDown()</button>
</div>
<script type="text/javascript">
 jQuery(function($){
   $("#btn1","#test2").click(function () { 
     $("div","#test2").fadeOut();
   });
   $("#btn2","#test2").click(function () { 
     $("div","#test2").slideDown();
   })
 });
</script>

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

ところで、前回fadeInを試しましたので、今度は、fadeOut/slideDownの切り替えではなく、fadeOut/fadeInで切り替えてみます。



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

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

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

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

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