1. HOME > 
  2. ブログ・お知らせ > 
  3. jQuery > 
  4. 備忘録「jquery-opacity-rollover.js」

ライラックミモザのブログ・お知らせ

2012年2月29日

備忘録「jquery-opacity-rollover.js」

グローバルナビやバナーなどにマウスオーバーしたときに、画像の色を少しとばして、白くふわっと(透明に)するエフェクトをつけたいと思うことがよくあります。
そんなとき、今までは、
1.マウスオーバー時の画像を用意して、ロールオーバーする
2.CSSでOpacityプロパティを利用する
のどちらかで対処していたのですが、1は画像を用意する手間がかかる(←たいした手間ではないのですが)、2はOpacityプロパティがCSS3の機能のため、IEなどのブラウザで使えないという、どちらも一長一短的な点がありました。

そこで、今回、利用してみたのが、THE HAM MEDIA BLOGさんが提供している透明度を利用をしたjQueryのロールオーバープラグイン「jquery-opacity-rollover.js」です。
文字どおり、透明度を利用したロールオーバーで、マウスオーバーすると、画像の色が薄くなります。
使い方はとても簡単で、jquery-opacity-rollover.jsを読みこみ、head内に
$(‘セレクタ’).opOver();
を記述するだけ。

上記のエフェクトのほか、画像の色を逆に濃くしたり、一瞬光ったように見せたり、色の変化の速度を変えたりすることができるのも特徴です。

[2012.05.09追記]

上記の記事で、IEでOpacityプロパティが使えないと書いていましたが、IE独自のfilterプロパティを使うことによって、Opacityプロパティのような効果をつける方法を教えていただきました。
例えば、Opacityプロパティの値を0.8にするときは、CSSに下記のように記述します。
a:hover img {
opacity:0.8;
filter:alpha(opacity=80); /* IE6・7 */
-ms-filter: “alpha( opacity=80 )”; /* IE8 */
}
参考にさせていただいたのは、下記の記事です。
・「超シンプル!hover画像作る必要ナシ、CSSだけで、画像をロールオーバー!
ありがとうございます。

ブログ・お知らせトップへ