TAGS :,

jQueryでボタンなどに対してのロールオーバーエフェクトをつけるプラグインは多々ありますが、
プラグインのような大きなものでを使用するのではなく、もっと簡単・シンプルな方法で
ロールオーバーエフェクトをつけることが出来ないか実験してみました。

サンプルはテキストリンクボタンに背景画像を敷いて、
ロールオーバー時にアニメーションをつけるパターン。

まず、HTMLソースは以下のように<a>タグのみを並べます。

<a href="#">BUTTON A</a>
<a href="#">BUTTON B</a>
<a href="#">BUTTON C</a>

ボタンを整形するCSSは以下のようにしておきます。

a {
	width: 130px;
	height: 50px;
	line-height: 50px;
	font-size: 15px;
	font-weight: bold;
	color: #fff;
	text-align: center;
	position: relative;
	overflow: hidden;
	display: block;
}

そして、このHTMLとCSSに対してjQueryで背景画像アニメーションの
エフェクトをつけると以下のようなSCRIPTになります。（もちろんjQueryファイルは別途必要）

<script type="text/javascript">
$(function(){
	$("a").each(function(){
		var txt = $(this).text();
		$(this).append('<span>' + txt + '</span>');
		$('a span').css({
			top:'0',
			left:'0',
			width:'100%',
			height:'100%',
			position:'absolute',
			display:'block',
			cursor:'pointer',
			backgroundImage:'url(img/button.jpg)'
		});
		$('a').css({backgroundImage:'url(img/button_ov.jpg)'});
	});
	$("a").hover(function(){
		$(this).children('span').stop().animate({opacity:'0'},300);
	}, function(){
		$(this).children('span').stop().animate({opacity:'1'},300);
	});
});
</script>

<a>タグの中に<span>タグを生成し、２つを重ね合わせ、
上位置には<span>タグ【背景画像：マウスアウト時】
下位置には<a>タグ【背景画像：マウスオーバー時】
という構成にしています。

そしてマウスオーバーで上位置になっている<span>タグに
アニメーション（ここではフェード）効果をつけます。

これらを実際に動かすと以下のように。

簡単にフェードを掛けるだけで、
単純にパパッと画像が切り替わるロールオーバーと違った印象を与えることができます。

フェード以外でも同じ構成で「.hover」時のアクションを変えるだけで
違った動きを見せることも可能。

マウスオーバーでスライドアウトパターンの場合のSCRIPT。

<script type="text/javascript">
$(function(){
	$("a").each(function(){
		var txt = $(this).text();
		$(this).append('<span>' + txt + '</span>');
		$('a span').css({
			top:'0',
			left:'0',
			width:'100%',
			height:'100%',
			position:'absolute',
			display:'block',
			cursor:'pointer',
			backgroundImage:'url(img/button.jpg)'
		});
		$('a').css({backgroundImage:'url(img/button_ov.jpg)'});
	});
	$("a").hover(function(){
		$(this).children('span').stop().animate({top:'50px',opacity:'0'},200);
	}, function(){
		$(this).children('span').stop().animate({top:'0',opacity:'1'},200);
	});
});
</script>

こっちを実際に動かすと以下のように。

ボタンのデザインにもよりますが、こんな動きもおもしろいかなと。

jQueryでIMGタグで表示している画像（ボタンなど）に対してエフェクトをつけるのは簡単ですが、
背景画像に対してエフェクトを掛ける場合は、意外と面倒な感じが。。。

プラグインを使わずに背景画像のロールオーバーをつける際に是非。。。

【関連記事】
jQueryでロールオーバー時の背景画像切り替えいろいろ