マウスオーバーした画像にフェードイン効果（半透明）をつけるjquery

jQuery

ポートフォリオで使用した、画像をマウスオーバーすると、半透明にフェードインして行くjqueryを備忘録用に記録。
このリンク部分で使用しました。
http://webdesign7.main.jp/portfolio/

CSSで半透明効果を出す方法

しかし、徐々に透明になるふわっとした感じは出ない様です。

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

jqueryで、マウスオーバーしたら透明度を変える方法

1：最初にheaderに，jQuery本体を読み込む

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

2：Queryの処理を記述する

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

この場合は、#gallery imgのhover時に，フェードインが掛かる様に設定しています。
imgにすると、画像全体に掛かるので、嫌なら細かい設定をする必要がある。

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

◎参考の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>

以上，このサイトを参考にしました。