ロールオーバーで画像をフェードイン、フェードアウトして元の画像に戻る
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クラスを指定している。