jQueryを利用した透明度の変化でロールオーバーを表現するプラグイン

何番煎じになるかどうかわかりませんが、自分でも透明度を操作して、ロールオーバーを表現するプラグインを作ってみました。

オプションで、ロールオーバー前の透明度、ロールオーバー後の透明度、フェードアニメーションの有無、フェードありならフェードするスピードの設定が可能です。

使い方はこんな感じ。

1
$("#hoge").alphaRo();

上の記述で、「hoge」というidの付いた要素に適用されます。

以下は詳細説明。

関数概要

{target}.alphaRo({option});

{target}
適用する対象
{option}
from = 1
ロールオーバー前の透明度
to = 0.8
ロールオーバー前の透明度
fade = false
ロールオーバー前の透明度
speed = normal
アニメーションの速度
(slow, normal, fastの三段階、もしくはミリ秒)

サンプルコード

スタンダード

1
$("a.sample01").alphaRo();

フェードアニメーション

1
$("a.sample02").alphaRo({fade:true});

アニメーション速度変更

1
$("a.sample03").alphaRo({fade:true,speed:"fast"});

透明度変更

1
$("a.sample04").alphaRo({from:0.5,to:1,fade:true});

グループ化

rel属性に同じ値を付けると同時に適用されます

1
2
<a href="#" rel="group" class="sample05"><img src="img/btn.jpg" alt="test" border="0" /></a>
<a href="#" rel="group" class="sample05"><img src="img/btn.jpg" alt="test" border="0" /></a>
1
$("a.sample05").alphaRo();

全体のコードもそれほど長くないのでペタリ。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
jQuery.fn.extend({
alphaRo : function(opt) {
if( !opt ) opt = new Object();
var _from = opt.from!=null ? opt.from : 1;
var _to = opt.to!=null ? opt.to : 0.8;
var _f = opt.fade!=null ? opt.fade : false;
var _s = opt.speed!=null ? opt.speed : "normal";
$(this).css({"opacity":_from, display:"inline-block"}).bind("mouseenter", {toNum:_to}, toOpacity).bind("mouseleave", {toNum:_from}, toOpacity);
function toOpacity(event) {
var tgt = $(this);
var rel = tgt.attr('rel');
if( rel ) {
tgt = $("*[rel='"+rel+"']");
}
( _f ) ? tgt.queue([]).fadeTo(_s, event.data.toNum) : tgt.css("opacity", event.data.toNum);
}
return $(this);
}
});
Author: SUSH
Link: http://blog.sus-happy.net/jquery-alpha-rollover/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.