画像をマウスオーバーするとふわ～っと透明度がフェードインしていくFLASHのような効果のご紹介記事です。（マウスアウトでフェードアウト）

いや～しかし暑いっすね、旦那！そこのお兄さん、お姉さん、ちょっくらこのマウスオーバー効果見てっておくれでないかい？・・・なんていう会話が街中から聞こえそうな毎日であります。_(:D)￣|_ 皆様も夏バテなどしないようご自愛下さいませ。

まずは、サンプルを見てみてください。

サンプル

画像をマウスオーバーすると、画像の透明度が徐々に変わっていきます。マウスアウトすると、もとの透明度に戻る。FLASHではよく見る手法です。
スタイルシートで画像をマウスオーバーしたら透明度を変えるという手段もあるのですが、スタイルシートでは、徐々に変化する事を実現する事は難しいです。

（例）スタイルシートで画像をマウスオーバーしたら透明度を変える

a:hover img{
  opacity:0.6;
  filter: alpha(opacity=60);
}

そこで、今回はjQueryで徐々に透明度が変わるという処理をやらせてみました。

以下、実装手順です。
1.　ヘッダにjQuery本体を読み込む

<script type="text/javascript" src="js/jquery.js"></script>

2.　jQueryの処理を記述する

$(document).ready(
  function(){
    $("#gallery img").hover(function(){
       $(this).fadeTo("normal", 0.6); // マウスオーバーで透明度を60%にする
    },function(){
       $(this).fadeTo("normal", 1.0); // マウスアウトで透明度を100%に戻す
    });
  });

hoverイベントを用いて#gallaryのimg要素をマウスオーバーしたら、フェードイン、マウスアウトでフェードアウトする処理を実行しています。

フェードの部分はjQueryのFadingエフェクトを使用しています。
以下、解説です。

fadeTo(speed, opacity, [callback])

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

※引用元
jQueryのFadingエフェクト3 - ［JavaScript］All About

引数の解説。

speed ： フェードの速度。”slow”, “normal”, “fast” の文字列か、ミリ秒を数値で指定。
opacity ： 不透明度。0 ～ 1 で指定。この不透明度になるまで、フェードします。
callback ： フェードが終了した後に実行されるコールバック関数。（オプション）

※引用元
fadeTo(speed, opacity, callback) [ jQuery ] - StackTrace

ですので、
$(this).fadeTo(”normal”, 0.6); は、「普通(noramal)の速度で透明度を60%にする」という処理になり、
$(this).fadeTo(”normal”, 1.0); は、「普通(noramal)の速度で透明度を100%にする（戻す）」という処理になります。

3.　該当箇所のHTMLを記述する

<div id="gallery">
   <a href="#"><img src="images/01.jpg" alt="ysfla" width="121" height="83" /></a>
   <a href="#"><img src="images/02.jpg" alt="1000off" width="121" height="83" /></a>
   <a href="#"><img src="images/03.jpg" alt="spacy" width="121" height="83" /></a>
   <a href="#"><img src="images/04.jpg" alt="menufla" width="121" height="83" /></a>
</div>

以上です。
（詳細はサンプルをご覧下さい。）

商品画像や、ギャラリーのサムネイル画像等にちょっとしたアクセントとして使えそうですね。（私はさっそくこのサイトに実装してみました。まったく、、、ミーハーですな！）
また画像に対して面白そうな効果を見つけましたら記事にしますね！！

以下、今回の記事作成する為に参考にさせて頂いたサイトです。
ありがとうございます！
・jQueryのFadingエフェクト3 - ［JavaScript］All About
・fadeTo(speed, opacity, [callback]) - jQuery 1.3.2 日本語リファレンス
・fadeTo(speed, opacity, callback) [ jQuery ] - StackTrace

こちらもあわせてどうぞ！

• [jQuery]クロスフェードで切り替わる画像（URL）を簡単実装「Innerfade with jquery」！
• [jQuery]自由自在！マウスオーバーで背景画像と文字色がフェードで切り変わるメニューColor Fading Menu
• [jQuery]3階層以上のドロップダウンメニューを表示する「droppy」！
• [jQuery]くるくる回転！？キュートな水平メニューFancy Navigation withCSS & jQuery！
• マウスオーバーでスライドイン・アウトするメニュー