jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種

ナビゲーションはテキストにしないとseo的にあれだよとか言われていますが、コーポレートサイトではまだまだ画像を使用されていることが多いと思います。なので、今回は画像ナビゲーション限定です。（テキストでもあまり変わらないと思いますが……）

縦型+テキストタイプのナビゲーションはこちらの記事をご覧ください。
「jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種」

htmlと画像の準備

はじめにボタンとなる画像を作成します。
通常の画像とマウスオーバー画像は別の画像にした方がわかりやすいですが、今回は一つの画像にしました。一つだけだとあれなんで複数作成します。

こんな画像を作成してみました。名前は「nav01.gif」～「nav04.gif」です。

次にhtml&cssです。

html

		<ul id="nav1">
			<li><a href="#"><img src="img/nav01.gif" width="100" height="59" /></a></li>
			<li><a href="#"><img src="img/nav02.gif" width="100" height="59" /></a></li>
			<li><a href="#"><img src="img/nav03.gif" width="100" height="59" /></a></li>
			<li><a href="#"><img src="img/nav04.gif" width="100" height="59" /></a></li>
		</ul>
	

css

		ul#nav1 li {
			float: left;
			margin-left: -1px;
			width: 100px;
			height: 30px;
			overflow: hidden;
		}
	

htmlはリストで普通に並べてるだけです。
cssはそのままだとマウスオーバー分の画像も表示されてしまうので表示するサイズを指定して「overflow: hidden」します。
「margin-left: -1px;」は画像にラインを入れてしまったのでずらしています。
この当りはデザインによって変更してください。

マウスオーバーアニメーションの基本型

jQueryでマウスオーバー処理を行うには「hover」メソッドを使用します。
「hover」メソッドはマウスオーバー時に第一引数が実行され、マウスアウト時に第二引数が実行されます。
こんな感じに記述することになります。

javascript

		$('#hoge').hover(
			function(){  
				//マウスオーバー処理
			},
			function(){
				//マウスアウト処理
			}
		);
	

マウスオーバー時にアニメーションする処理をしたら、マウスアウト時には元に戻すような処理をすれば良さそうですね。

1.フェードイン・フェードアウトで切り替わるナビゲーション

		$(function() {
			var num = 1;
			$('#nav1 li')
			//マウスオーバー画像を配置
			.each(function(){
				$(this).css('background', 'url(img/nav0'+num+'.gif) no-repeat 0px -29px')
				num++;
			})
			.find('img').hover(
				function(){  
					$(this).stop().animate({'opacity' : '0'}, 500);  
				},
				function(){
					$(this).stop().animate({'opacity' : '1'}, 1000);
				}
			); 
		});
	

			$(function() {
				$('#nav1 li')
					.each(function(i){
						$(this).css('background', 'url(img/nav'+(i+1)+'_o.gif) no-repeat');
					})
					.find('img').hover(
						function(){  
							$(this).stop().animate({'opacity' : '0'}, 500);  
						},
						function(){
							$(this).stop().animate({'opacity' : '1'}, 1000);
						}
					); 
				}
			);
		

2.くるっと切り替わるナビゲーション

くるっと切り替えはフェードインより簡単です。すでにマウスオーバー時の画像と通常時の画像を１枚で作成していたので新たに配置する必要がなく、スライドさせるだけですね。

javascript

		$(function() {
			$('#nav2 li img')
			.hover(
				function(){
					$(this).stop().animate({'marginTop':'-29px'},'fast');
				},
				function () {
					$(this).stop().animate({'marginTop':'0px'},'fast');
				}
			);
		});
	

上下に画像を作成したので上方向に画像の半分だけマイナスします。
またアニメーションのスピードは数値以外にも「fast」「normal」「slow」の文字列でもいけます。

3.マウスオーバーした画像に何かが追尾するナビゲーション

マウスオーバーした画像に追いかけてくるあれを作ります。Flashのサイトとかにありそうですよね。

新たに追尾用の画像を作成します。
htmlはulの下に配置し適当なidをつけて囲みました。

html

<div id="wrap">
	<ul id="nav3">
		<li><a href="#"><img src="img/01/nav01.gif" width="100" height="59" /></a></li>
		<li><a href="#"><img src="img/01/nav02.gif" width="100" height="59" /></a></li>
		<li><a href="#"><img src="img/01/nav03.gif" width="100" height="59" /></a></li>
		<li><a href="#"><img src="img/01/nav04.gif" width="100" height="59" /></a></li>
	</ul>
	<img src="img/01/boder.gif" width="98" height="4" id="btn-bd" />
</div>

css

#wrap {
	position: relative;
}
#btn-bd {
	margin-left: 15px;
	top: 0px;
	position: absolute;
}

今まではマウスオーバーしていた要素自体を動かしていたのですが、今回は別の画像を動かしますよね。
これは「tihs」としてたところを上で指定したid「btn-bd」と置き換えます。
「$(this).position().left」で親からの位置を取得できますので、その位置まで移動させましょう。

javascript

$(function() {
	$('#nav3 li').hover(function(){  
		//画像の位置を取得
		var left = $(this).position().left;
		$('#btn-bd').stop().animate({
			marginLeft : parseInt($(this).css('margin-left'))+ left+1 +'px'
		},'fast');
	});
});

2011.12.05 修正

4.拡大するナビゲーション

次は拡大縮小です。

小さい画像を大きくするとかなり汚くなりますので、画像は拡大したときのサイズで作成します。
ただ大きい画像を縮小した場合でも潰れたりしますので場合によっては両方用意して置き換えなどをした方が良いかもしれません。
今回は一枚の画像を拡大縮小します。

html

		<ul id="nav4">
			<li><a href="#"><img src="img/nav01.gif" width="70" height="70" /></a></li>
			<li><a href="#"><img src="img/nav02.gif" width="70" height="70" /></a></li>
			<li><a href="#"><img src="img/nav03.gif" width="70" height="70" /></a></li>
			<li><a href="#"><img src="img/nav04.gif" width="70" height="70" /></a></li>
		</ul>
	

javascript

		$(function() {
			$('#nav4 li img')
			.hover(
				function(){
					$(this).stop().animate({
						'width':'130px',
						'height':'130px',
						'marginTop':'-32px'
					},'fast');
				},
				function () {
					$(this).stop().animate({
						'width':'70px',
						'height':'70px',
						'marginTop':'0px'
					},'fast');
				}
			);
		});
	

「width」「height」を動かすようにすれば拡大ですね。
左上を基点として拡大されるので、上方向に移動しながら拡大させてることで中心から拡大されているようにみせてます。

5.横からぐいんって伸びるナビゲーション

横からぐいんって伸びるやつです。ここまできたら楽勝で作れそうですね。

javascript

		$(function() {
			$('#nav5 a')
			//ボタンを-200で配置
			.each(function(){
				$(this).css('margin-left', '-200px')
			})
			.hover(
				function(){
					$(this).stop().animate({
						'marginLeft':'0px'
					},'fast');
				},
				function () {
					$(this).stop().animate({
						'marginLeft':'-200px'
					},'slow');
				}
			);
		});
	

特に今までと違うところはないですね。もし上から飛び出したい場合は「marginTop」に変更します。
cssであらかじめ配置マイナスに配置しておくか、スクリプトで配置するかはデザインによって変えるべきなのかなと思います。

jQuery Easing Pluginで動きにバリエーションをつける。

ここまででもいろいろ表現の幅が広がったと思いますが、もっと根本的にアニメーション方法を変えたいといった場合があると思います。
「jQuery Easing」というプラグインを使用するれば簡単にアニメーションのバリエーションを増やすことができます。
下記サイトからプラグインをダウンロードして読み込んでください。

jQuery Easing Plugin

使用方法は「animate」の第３引数にアニメーション方法を指定します。
試しに先ほどの「伸びるナビゲーション」の動きを変えてみます。

javascript

		$(function() {
			$('#nav5 a')
			.each(function(){
				$(this).css('margin-left', '-200px')
			})
			.hover(
				function(){
					$(this).stop().animate({
						'marginLeft':'0px'
					},'falst', 'easeOutBounce');
				},
				function () {
					$(this).stop().animate({
						'marginLeft':'-200px'
					},'slow', 'easeOutBounce');
				}
			);
		});
	

どうでしょう。また違った感じになりましたね。
Easing Plugin自体色々カスタマイズできるみたいなんで色々試してみると面白そうですね。