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

2009.1.15 にjQueryのv1.3が正式リリースされました。v1.3は、v1.2をベースとして主に高速化や新機能の追加およびバグフィックスなどが行われているコードですので、 基本的に今のところ互換性には大きな障害などは無いと思われます。もし、バージョンの違いで特記事項がある場合は、つとめて記述しておきたいとは思いますが、 このシリーズは今回以降は、新しいv1.3を基にして話を進めたいと思いますので、あらかじめご了承ください。

---

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

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

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

fadeTo( speed,opacity )

fadeToメソッドは、マッチした要素を第2引数で指定した不透明度Opacityへフェイドします。第1引数で、アニメーションスピードと、第3引数で、動作完了後に起動させるコールバック関数も指定できます。(第3引数は省略可)

fadeIn・fadeOutで、はたとえば $("#test1").fadeIn(); 　 $("#test1").fadeOut(); のように引数を省略して記述も できましたが、fadeToでは、fadeTo( speed,opacity,callback ) の引数のうち第1、第2引数指定は必須となります。

ここでは、とりあえず、第1引数と第2引数を使った簡単なサンプルを作ってみます。ボタンをクリックしてみてください。



ボタンをクリックすると、div下の最初の要素(:first)と最後の要素(:last)が、それぞれ第2引数で指定された不透明度までフェイドアウトします。 コードは次のとおりです。

<div id="test1">
  <div style="height:100px;
              width:100px;
              background-color:#cea8ff">:first</div>
  <div style="height:100px;
              width:100px;
              background-color:#cea8ff">:last</div>
  <button>0.3と0.7までフェイドアウト</button>
</div>
<script type="text/javascript">
 jQuery(function($){
   $("button","#test1").click(function () {       $("div:first","#test1").fadeTo("slow",0.3);      $("div:last","#test1").fadeTo("slow",0.7);
   })
 });
</script>

第一引数のspeedは、今までのslideDownなどのメソッドと同様にアニメーションの速度を"slow", "normal", "fast"あるいはミリ秒で指定し、第2引数は不透明度です。 不透明度は0から1の数字で、0は透明、1は不透明を表します。

前回同様に、逆方向のメソッドを並べてみます。それぞれクリックしてみてください。



フェイドアウトボタンで薄くなったdiv要素がフェイドインボタンで再度不透明化されます。 コードは次のとおりです。

<div id="test2">
  <div style="height:100px;
              width:100px;
              background-color:#cea8ff">my2</div>
  <button id="btn1">0.5までフェイドアウト</button>
  <button id="btn2">1までフェイドイン</button>
</div>
<script type="text/javascript">
 jQuery(function($){
   $("#btn1","#test2").click(function () { 
     $("div","#test2").fadeTo("slow",0.5);
   });
   $("#btn2","#test2").click(function () { 
     $("div","#test2").fadeTo("slow",1);
   })
 });
</script>

もうひとつ、これも前回同様に試してみます。 上記サンプルではふたつのボタンでフェイドイン/フェイドアウトを切り替えましたが、要素の「oj.css("opacity")」の値を調べて切り替える方法です。



スイッチボタンを何度も押すと、フェイドイン/フェイドアウトが交互に切り替わります。 コードは次のとおりです。

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

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

   $("#btn3").click(function () {
     if (target.css("opacity")!=1) {
        target.fadeTo("slow",1);
     } else {
        target.fadeTo("slow",0.1);
     }
   })
 });
</script>

では、次ページでは、このfadeToメソッドの第1引数speedを少し調べます。