2012年8月8日水曜日

マウスオーバー時に画像をきれいに見せる方法(jQuery)

  • このエントリーをはてなブックマークに追加

デザインの仕事もしていたりすると、マウスオーバー画像を作るのが面倒だったりする事がある。
そういうときに便利なのが、マウスオーバーした際に画像を半透明にする方法。
特に落ち着いたデザインのサイトだと半透明にするだけですごく見やすい。
ということでjQueryでコードを書いてみた。

$(document).ready(function(){
  var notFilter = "";
  $('a img').not(notFilter).bind({
    mouseover:function(e){
      $(this).stop(true,false).animate({
        opacity:0.6
      },200);
    },
    mouseout:function(e){
      $(this).stop(true,false).animate({
        opacity:1
      },200);
    }
  });
});

var notFilterには半透明にしたくない要素を入れれば大丈夫。
基本的には<a>タグの子要素の画像にかかる感じ。

Adsense