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

fadeIn()

fadeInメソッドは、マッチした要素の不透明度Opacityを操作してフェイドインしつつ可視化します。 (参考:Effects/fadeIn )

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

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



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

<div style="display:none;
              height:100px;
              width:100px;
              background-color:#afff48">my1</div>
<button>フェイドイン</button>

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

試しに、slideUp()メソッドのボタンを追加してみます。それぞれクリックしてみてください。



フェイドインボタンで不可視化されていたdiv要素をslideUp()ボタンで再度消せます。 コードは次のとおりです。

<div id="test2">
  <div style="display:none;
              height:100px;
              width:100px;
              background-color:#afff48">my2</div>
  <button id="btn1">フェイドイン</button>
  <button id="btn2">slideUp()</button>
</div>
<script type="text/javascript">
 jQuery(function($){
   $("#btn1","#test2").click(function () { 
     $("div","#test2").fadeIn();
   });
   $("#btn2","#test2").click(function () { 
     $("div","#test2").slideUp();
   })
 });
</script>

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



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

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

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

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

はじめに、$("div","#test3")で動作させる対象要素を絞り込み、変数targetへ代入しておきます。

あとは、ボタンクリックでその要素が:hiddenな状態かどうかを調べてfadeIn()とslideUp()の動作を分岐します。 target.is(":hidden")は、要素が:hiddenならtrue、違えばfalseを返します。 (参考:Traversing/is )

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