fadeTo()で写真を透過

さて、拙サイト8月リニューアルで新たに、マウスオーバー時にリンクを貼った写真を透過させるjQueryを追加してみた。ただ通常とは逆に、初期状態が40％の透過状態で、マウスオーバー時に100％になるように設定。


初期状態（40％透過）はCSSで設定。

.transparent{
 filter:alpha(opacity=40);
 -moz-opacity: 0.4;
 opacity: 0.4;
}

このCSSの設定の詳細は

• CSSで透明度／透過度（opacity）の指定をする方法 | BlackFlag

などを参照。透過させるjQueryは

• jQueryでマウスオーバー時に画像やテキストを透過させる - fctale

を参照。感謝感激。

元のソース

$(function(){
  $(".alpha").hover(function(){
    $(this).fadeTo("normal", 0.4);
  },function(){
    $(this).fadeTo("normal", 1.0);
  });
});

このままだとマウスオーバー時に40％透過になるので、

$(function(){
 $(".transparent").hover(function(){
  $(this).fadeTo("normal", 1.0);
 },function(){
  $(this).fadeTo("normal", 0.4);
 });
});

赤の数字を入れ替え（薄赤部分は自分の設定したクラス名に変更）。

---