jQueryを利用したマウスオーバー

※jquery本体プラグインが必要です。opacity-rollover2.1.jsを使用します。さらに、下記のscriptを読み込みます。

(function($) {
$(function() {


 
この中に、それぞれを記述していきます。 
 
 
 
});
})(jQuery);

透明度を利用したマウスオーバー

適応させたいセレクタを指定し、opOver()で適応させる。

$('#over1').opOver();

一瞬光ったようなロールオーバー

$('#over2').wink();

薄い状態から濃い状態へのロールオーバー

$('#over3').opOver(0.6,1.0);

opOvernの括弧の中で、初期の透明度と、マウスオーバーさせたときの色の濃さを指定することで、透明度の調整をすることができます。
カッコ内の左が初期値で、コンマを挟み、２番目にマウスオーバー時の透明度を指定します。

色の変化速度を変える

$('#over4').opOver(1.0,0.6,200,500);

opOvernの括弧の中で、初期の透明度と、マウスオーバーさせたときの色の濃さを指定の後で、その変化の速度を変更することができます。
左から３つめの数字がマウスを乗せた時の色の変化時間（1秒=1000）と、マウスが離れたときの変化時間を指定します。

winkの速度を変える

$('#over5').wink(200);

デフォルト状態で'slow'が指定されておりますが、「200」にすると下記サンプルのようになります。

winkの透明度もかえる

$('#over6').wink('slow',0.2,1.0);

初期値は、デフォルトが1.0でマウスが乗った瞬間が0.2になっています。これを、上記例にしてみえると、下記サンプルのようになります。

画像以外でも利用可能

セレクタさえ指定すれば、画像でなくてもプラグインを適応することができます。ブロック全体にも、テキスト文字だけにもどちらでも利用可能。

jquery.com／jquery.com

opacity-rollover2.1引用先／THE HAM MEDIA BLOG