超簡単なjQueryによる画像ロールオーバー エフェクト
- 投稿日 : 2011-05-03, 16:51
- 最終更新日時 : 2011-05-03 17:24:56（履歴）
- タグ（Javascript / jQuery / Accessibility）
- カテゴリ（Javascript）
- 記し人（luvsic）[PDF]
- 閲覧数（2751）
jQueryで非常に簡単に実装する、ロールオーバー（hover）でのエフェクト実装です。画像にマウスを乗せたときに、簡単に一瞬光るような感じのアニメーションを実装します。
/*
* Ex: hover effect, image link.
* Update: 2011-05-01
* auther: Luvsic
* licence: MIT
* info: https://luvsic.net/item/140
*
*/
jQuery(function(){
$('a img').hover(
function(){
$(this).fadeTo(0, 0.7).fadeTo('slow', 1);
},
function(){
$(this).fadeTo('fast', 1);
}
);
});
行っていることは単純です。透明度を0.7にしてから、アニメーションで1.0に戻すだけ。背景透過のレイヤーに配置している場合は工夫が必要になりますが、たいていは白背景ですし、そうでないとしても白背景のdivやa要素でくくってあげれば対応できるケースが多そうです。
上記コードはIE6以上、その他モダンブラウザで対応しています。CSSのopacityをアニメーションさせているだけではありますが、jQueryのcss()を利用するのではなく、クロスブラウザ対応エフェクトであるfadeTo()を利用するのがポイントです。内部的にopacityとIE独自実装のfillter()を両方利用しているのでしょう。
No comments yet