Wednesday, 29 August 2012

fadeTo()で写真を透過

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


初期状態(40%透過)はCSSで設定。
.transparent{
 filter:alpha(opacity=40);
 -moz-opacity: 0.4;
 opacity: 0.4;
}
このCSSの設定の詳細は
などを参照。透過させるjQueryは
を参照。感謝感激。

元のソース
$(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);
 });
});
赤の数字を入れ替え(薄赤部分は自分の設定したクラス名に変更)。

No comments:

Post a Comment