purazumakoiの[はてなブログ]

技術メモから最近はライフログも増えてきてます。

ロールオーバーで画像をフェードイン、フェードアウトして元の画像に戻る

var opacity = '0.7';
$('img.fadeImg').each(function() {
 var img = $(this);
 img.wrap('<span class="inlineBlock"></span>');
 img.hover(
  function() {
   img.stop(true, true).fadeTo(50, opacity).fadeTo(500, 1.0); 
  },
  function() {
   img.fadeTo(100, 1.0); 
  }
 );
});
    • .wrap()でimg要素をinlineBlockクラスのspanで囲う

これで背景色を白にするので、色つき背景の時でもok

.inlineBlock {
	background-color: #ffffff;
	display: inline-block;
	/display: inline;
	/zoom: 1;
}
    • .stop()命令でマウスオーバー時に更にマウスオーバーの処理が発生したばあい、要はカーソルを短時間に何度も同じimg要素にマウスオーバーしたときにfade処理がキューに溜まるのを防ぐ


追記
※firofox2系だと上手く動かない。
※最近は.wrap()で包まずに、静的にaタグにinlineBlockクラスを指定している。