jQuery Easy Rollover ../index

jQuery / IE8 IE9 IE10 IE11 Chrome Firefox Safari

File

gitHub Repository

Sample

ロールオーバー時の読み込みを軽減させるための、プリロード付きロールオーバーJavaScriptです。
Develoop ToolのNetworkからロールオーバー後の画像となる「button01_over.png」がマウスオーバー前に読み込まれていることがわかります。

使い方は簡単で対象となる要素を参照し、プラグインを実行するだけです。
オプションでサフィックスの変更が可能です。 

<a href="#"><img src="button01_out.png" width="180" height="57" alt="button" class="rollover"></a>
<a href="#"><img src="button02_out.png" width="180" height="57" alt="button" class="rollover"></a>
<a href="#"><img src="button01_off.png" width="180" height="57" alt="button" class="rollover-suffix"></a>
<a href="#"><img src="button01.png" width="180" height="57" alt="button" class="rollover-fade1"></a>
<a href="#"><img src="button01_out.png" width="180" height="57" alt="button" class="rollover-fade2"></a>
<script src="jquery.easy-rollover.js"></script>
<script>
$(function(){
	// 通常
	$('.rollover').easyRollover();

	// サフィックス
	$('.rollover-suffix').easyRollover({
		suffix: '_off.',
		suffix_replace: '_on.'
	});

	// 透過フェードするだけのロールオーバー
	$('.rollover-fade1').easyRollover({
		suffix: false,
		transition: 'fade',
		opacity: 0.2,
		duration: 400
	});

	// フェードして切り替わるロールオーバー
	$('.rollover-fade2').easyRollover({
		transition: 'fade',
		duration: 1000,
		easing: 'swing'
	});
});
</script>

Option

Name Value Initial value Description
suffix Strong（文字列） _out. 置換前の文字列を指定します。
suffix_replace Strong（文字列） _over. 置換後の文字列を指定します。
transition moment | fade moment 切り替わるときの演出を指定します。
duration Number（数値） 250 切り替わりがアニメーションの場合に、その再生秒数をミリ秒で指定します。
easing linear | swing （jQuery Easing） linear 切り替わりがアニメーションの場合に、そのイージングを指定します。
parent_style_overlap true | false true transition の設定が fade のとき、親要素のスタイルをJavaScriptで書き換えるかの on / off を指定します。