WEBOPIXEL

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

Posted: 2010.10.24 / Category: javascript / Tag: 

ちょっと前まではマウスオーバーといえば画像の切り替えくらいでしたけど、最近ではアニメーションで切り替わるマウスオーバーも増えてきましたね。
ということでこの記事ではjQueryを使用して、わりと簡単に作れるマウスオーバーアクションをご紹介します。

Sponsored Link

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

demo

縦型+テキストタイプのナビゲーションはこちらの記事をご覧ください。
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.フェードイン・フェードアウトで切り替わるナビゲーション

一つ目はマウスオーバーアニメーションと聞いて最初に思いつきそうなフェードインフェードアウトで切り替わるボタンを作成します。

フェードイン・フェードアウトイメージ

「animate」メソッドで「opacity(透明度)」を変化させていけばいけそうですが、そのままだと画像が消えるだけなので背景にマウスオーバー時の画像を配置します。
背景画像はcssで直接指定した方が確実ですが、btn01とか02とか一つずつクラスなど割り当てるのが面倒なのでスクリプトでやってみます。

上の画像だけフェードアウト

javascript

		$(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);
				}
			); 
		});
	

6行目でリストの数だけ背景画像を配置しています。マウスオーバー時の画像が表示されるように画像分だけY方向にずらしています。
10行目がマウスオーバーの処理ですね。「animate」の前に「stop」メソッドを挟まないとアニメーション途中でマウスアウトしてすぐにマウスオーバーしても止まらず、アニメーションが終わった後に何度もアニメーションしてしまいます。
「animate」メソッドの第二引数の数値はアニメーションのスピードなのでいろいろいじってみてください。

2枚の画像で切り替えるバージョン

demo

1枚の画像で切り替えるのはわかりにくかったかもしれないので、2枚の画像で切り替えるバージョンも作りました。
まずは下図のように同じ大きさのボタン画像を用意します。

通常の画像は「nav1.gif」にマウスオーバー画像は「nav1_o.gif」としました。

javascript

			$(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.くるっと切り替わるナビゲーション

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

くるっと切り替えイメージ

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」の第3引数にアニメーション方法を指定します。
試しに先ほどの「伸びるナビゲーション」の動きを変えてみます。

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自体色々カスタマイズできるみたいなんで色々試してみると面白そうですね。

COMMENTS

suworks 2011-12-03 15:36 

参考にさせて頂きました。
ワンパターンになっていたマウスオーバーが華やかになりました。
ありがとうございます。

質問があります。

ページを中央揃えしています。
■HTML

【内容】

■CSS
all{
margin:0 auto;
width:●●px;
}

この時
3.マウスオーバーした画像に何かが追尾するナビゲーション
を設置すると、画面を最大化した時にラインがずれます。
画面を小さくすると合います。
これはどう修正したら良いでしょうか?

suworks 2011-12-03 15:38 

■HTML
<body>
<div id=”all”>
【内容】
</div>
</body>

webOpixel 2011-12-05 08:50 

↑を修正しましたのでご確認ください。
サンプルだと「#wrap」の位置をセンター合わせにしていただければいけると思います。

mkt 2011-12-25 04:12 

cssで背景画像を設定して、マウスオンで背景画像が切り替わるスクリプトはあるのですが、背景の上にテキストを入れると、マウスオンで消えてしまいます。
テキストはそのままで、背景画像だけ変更されるようにはできないでしょうか?

webOpixel 2011-12-26 08:04 

こちらのページは参考になりませんか?
http://www.webopixel.net/javascript/275.html

numa 2012-01-22 13:53 

こんにちは。

マウスオーバー切り替えを探していて、こちらのページにたどり着きました。
理想の動きをするアニメーションに出会え、嬉しい限りです。

1つ質問なのですが、こちらに掲載されているjQueryのソースコードを、商用利用することは可能でしょうか?
当方、ただいま自社のサイトを制作しており、そのサイトで使用したいと考えている次第です。

webOpixel 2012-01-23 16:44 

自由に使っていただいて大丈夫です。
必須ではないですが、お問い合わせなどから使用したサイトを教えて頂けると嬉しいです。

numa 2012-01-23 23:30 

お返事ありがとうございます。
感謝して使わせていただきます。

まだ制作し始めたばかりなので、完成はいつになるか分かりませんが(汗

hoge 2012-02-22 21:04 

超初心者ですが失礼します。

フェードを使わせてもらおうと思ったのですが
実験したら、フェードはするのですが背景画像が
出てきません。マウスをボタンに乗せてると
通常の画像が消えてしまいます。マウスをボタンから
離すと通常の画像が元に戻ってきます。

javascriptの6行目は作った画像の分だけ
ソースを足していかないと駄目なんですか?

ド超が付く初心者ですが優しくお願いしますw

webOpixel 2012-02-24 08:16 

6行目はリストの数だけループさせてますので増やす必要はありません。
「-29px」の部分は画像のサイズのよって変わってきますので、この辺りですかね。
一度cssで
ul#nav1 li.nav01 {
background:url(img/nav01.gif) no-repeat 0px -29px’;
}
と書いてみてマウスオーバー画像が表示できるか確認してみるといいかもしれません。

hoge 2012-02-24 15:48 

こんにちは。

凄いです!!出来ました!!

原因はcssの指定でした(涙)

超~初心者なのに親切に

教えて頂き、ありがとうございました。

smile design 2012-02-28 17:44 

大変参考になりました。
ありがとうございます。

pow 2012-03-03 16:01 

jquery初心者です。
フェードを使用させてもらってるんですが、透明にはなるんですが背景画像が出てこなくて困っています。
JS6行目で自分の画像サイズに合わせて設定してるんですがそれでも出てこないんです…

ほぼこのサイトに掲載されているコードをコピペしたんですが、他に修正すべき点はあるでしょうか?
よろしくおねがいします。

webOpixel 2012-03-05 08:23 

1つの画像で切り替えるのはわかりずらかったかもしれないので、
2つの画像で切り替えるタイプも作ってみました。
http://www.webopixel.net/javascript/179.html#s01-02

tak 2012-03-07 21:01 

はじめまして、大変参考にさせていただいております。
初歩的な質問で大変申し訳ありません。
1.フェードイン・フェードアウトについて質問です。
リンクを設定すると、画像に枠線が出てしまい、色々試しましたが解決できません。
上記html、Cssをそのまま使用しているはずなのですが、何か可能性はありますでしょうか?

宜しくお願い致します。

webOpixel 2012-03-08 15:35 

基本的なcssは上には書いてないのですが、
cssに下記は記述してありますか?
img { border: 0; }

jet 2012-07-24 16:34 

はじめまして、まだまだjquery初心者の者です。
これを右から出るようにするというのは、出来るでしょうか?

marginRightとしてもならなかったので
大変申し訳ないのですが、ご教授していただけませんでしょうか?

webOpixel 2012-07-26 11:19 

cssで右に配置することはできていますか?
絶対配置で配置してjqueryでは「right」プロパティをアニメーションさせればできると思います。

dana 2012-08-01 21:37 

はじめまして。3.マウスオーバーした画像に何かが追尾するナビゲーションを使わせていただいているのですが、Chrome,Firefoxなどでは正常に動くものの、
IE8では、
ul{
margin-right: auto;
margin-left: auto;
}
を併用した場合、なぜか追尾用の画像が正常な位置から右にずれてしまいます。
どうすればよいでしょうか? よろしくお願いいたします。

webOpixel 2012-08-03 14:48 

「#btn-bd」の「margin-left」を「left:0」を追加したらどうでしょう。

通りすがり 2012-09-20 16:53 

はじめまして

jQueryのスクリプトを探してこちらにたどりつきました。
非常にわかりやすくて勉強になります。

今回「何かが追尾するナビゲーション」を参考にさせてもらいたいのですが、例えば”GALLERY”ページなどに飛んだとき、追尾する画像が”GALLERY”に留まるようにするにはどうすればよいでしょうか?

よろしくお願いします。

webOpixel 2012-09-24 10:42 

ishikawa 2012-10-03 13:46 

はじめまして。
いつも大変参考にさせて頂いております。
以前、mktさんがご質問していた
「cssで背景画像を設定して、マウスオンで背景画像が切り替わるスクリプトはあるのですが、背景の上にテキストを入れると、マウスオンで消えてしまいます。
テキストはそのままで、背景画像だけ変更されるようにはできないでしょうか?」
という同じ現象で悩んでおります。
リンク先のテキストで背景の色を変えるアニメーションも参考にさせて頂きましたが勉強不足の為、解決できておりません。
お時間のある時で結構ですのでご教授の程よろしくお願い致します。

チャコ 2012-10-16 13:58 

このページの1(2枚の画像を切り替える)を、
縦並びにはできないのでしょうか?

3時間ほど色々試しましたが、オンマウスで画像が消えるだけ(白くなる)という結果にしかなりませんでした・・・いかがでしょうか?

webOpixel 2012-10-22 14:05 

ishikawaさん

ムダな要素ができてしまいますが、liの中にspanを追加して
<li><a href="#"><img src="img/nav04.gif" /></a><spaan></spaan></li>
aとspanの背景にボタン画像を設定したら、spanを表示非表示とすればアニメーションになるのではないかと思います。

チャコさん

サンプルの例だと「float: left;」を削除するするだけで縦並びになってjsはそのままでも問題ないとは思うのですが。

ic-eriver 2012-10-30 15:43 

すべてをまったく同じように作ったんですが、マウスオーバーが動作しないんですが、どうしてでしょうか?

webOpixel 2012-11-01 13:37 

サンプルは動いていますか?
もし動いているようであればどこか間違えている可能性が高いと思います。

のきこ 2013-04-18 20:40 

初めまして。
4.拡大するナビゲーションで、アイコンをいろんな場所に配置したところ、
マウスオーバーすると中心から拡大されません。
左側を起点に右側に拡大してしまいます。
中心から拡大するにはどうしたらいでしょうか?

よろしくお願いします。

webOpixel 2013-04-22 14:41 

「marginTop」は画像の大きさによって変更しますが、そのあたりは大丈夫でしょうか?

田中 2013-05-27 16:59 

非常に丁寧な解説をして頂き誠にありがとうございます。
早速入れてみたのですが、ずれた位置に表記されてしまうようです。
これはどこを修正すればいいのでしょうか?
初めてで大変不躾なご相談となってしまい申し訳ございませんが、
ご教示のほど、よろしくお願いいたします。

webOpixel 2013-05-28 16:51 

どのサンプルがずれてしまいますか?
もう少し詳しく書いて頂けるとお答えできるかもしれません。

田中 2013-05-29 10:09 

文章不足で申し訳ありません。
「何かが追尾するナビゲーション」ですが、URLをご覧頂けるとお分かりかと思いますが
横にずれて表示されているようです。
ご教示の程、よろしくお願いいたします。

webOpixel 2013-05-31 14:00 

サンプルを拝見しましたが、初期の段階ですでにずれていますので、cssの方に原因があるかもしれません。

ちょっと昔に作ったものなのでサンプルもあまり良い作りではないのですが、センター合わせのものも作りましたのでご確認ください。
http://www.webopixel.net/lab/sample/10/1023/03.html

iskw 2013-06-09 17:46 

はじめまして。丁度こういうものを探していたので、『3.マウスオーバーした画像に何かが追尾するナビゲーション』を使わせて頂きました!ありがとうございます。

そこで質問なのですが、更にこれを、『ナビゲーションの上からカーソルが離れる度にバーが一番左に戻る』ようにしたい場合は、どう書き加えればいいのでしょうか?
よろしければ、お教え頂けませんでしょうか。よろしくお願い致します。

webOpixel 2013-06-12 10:57 

他のサンプルをご覧頂ければわかると思いますが、hoverの第2引数にマウスアウト後の処理を追加することができます。
そこに「marginLeft:0」など入れるとできると思います。

iskw 2013-06-13 17:10 

なるほど、すごく単純なことだったんですね。すみません。ありがとうございました!

groovy 2013-08-01 11:12 

はじめまして

 画面中央に画像を配置してマウスホバーすると
その画像の下から入力フォームがでてくるようにしたいのですね。

 そのようなスクリプトを調べているうちにこのサイトに辿り着きました。

横からぐいんって伸びるナビゲーションをソースのまま作ると
左には動くのですが、marginLeftをmarginTop,marginBottom,marginRightに
変更したら動かないのです;;

 スクリプト自体は複雑なものではないため他にどこを変更すれば動くように
なるのかご教授いただけますでしょうか?

webOpixel 2013-08-01 11:23 

「float:right」とかしてみたらどうでしょう?
ある程度自由に配置した場合は「absolute」とかで配置した方がいいかもしれません。
まずcssだけでを調節して配置できるのを確認しておくといいと思います。

groovy 2013-08-01 14:38 

早速のご返答ありがとうございました。

float:rightでやってみたのですが動かずでした。。
marginLeftをmarginTopにするだけで縦に動いてくれそうなのに;;

 自分でももう少し調べてみます。何かアドバイスなどございましたら宜しくお願いいたします。

groovy 2013-08-01 16:13 

その後こちらの過去のスクリプトなどをチェックしながらテストを繰り返してみたらできました!!

 結果的にそのままでは出来なかったのですが $(‘#nav5 a’)を $(‘#nav5 img’)に変更したら思い通りの動きをしてくれました。ありがとうございます!!

あぴ 2014-05-14 17:15 

はじめまして。
こちらのサンプルを使用させて頂きたいのですが、一つ上手く出来ないことがあったので質問させて頂きます。

アニメーションは上手く出来るのですが、最後は透明になって画像が消えてしまいます。
マウスを離せばまたちゃんと表示されます。
動作は問題なく出来るのですが、その画像が消えてなくなってしまう現象はどうしたら解決出来るでしょうか?

ちなみに、二枚の画像で設置する方法で作っています。
よろしくお願い致します。

webOpixel 2014-05-22 11:10 

非表示にする画像(img)だけを透明にしなくてはいけないのですが、親のliを透明にしているのではないでしょうか?

Totomo 2014-08-12 11:15 

始めまして、超初心者です。
4.拡大するナビゲーション
を利用したいのですが、縮小時の画像、拡大時の画像をそれぞれ別に用意したいです。

1.フェードイン・フェードアウトで切り替わるナビゲーション
の「2枚の画像で切り替えるバージョン」を参考に、

 .each(function(i){
 $(this).css(‘background’, ‘url(img/01ex/nav’+(i+1)+’_o.gif) no-repeat’);
 })

の部分を、単純に nav04 のスクリプトに加えて見たのですが、
そう簡単にはいかないですね。。。

修正すべき箇所を教えて頂けないでしょうか。
宜しくお願い致します。

webOpixel 2014-08-13 12:59 

アニメーションが終わったあとに画像を切替るのであればコールバックとかですかね。
下記が参考になるかもしれません。
http://www.webopixel.net/javascript/507.html

tsuruiRiy 2014-08-22 14:46 

はじめまして、丁寧で解りやすく、すごく参考になりました!
できましたら、3.マウスオーバーした画像に何かが追尾するナビゲーションの
追尾部分のimgが非表示の状態→マウスオーバーで表示→追尾
というやり方も教えていただけたら幸いです。

webOpixel 2014-08-28 14:19 

同時にアニメーションということでしたら下記が参考になるかもしれません。
http://www.webopixel.net/javascript/507.html

mochi 2015-02-04 15:40 

「3.マウスオーバーした画像に何かが追尾するナビゲーション」を実装しようと思い設置したところ、きちんと動きはするのですが画像に当てているaタグのリンク先に飛ぶことができません。
解決法がございましたら、御指南いただけますと幸いです。

maru 2015-03-17 07:40 

3.マウスオーバーした画像に何かが追尾するナビゲーションを実装してみましたが、
クリック時に追尾する画像が一度、一番左に戻ってしまいます。クリック時にその場にどとめておくことはできませんでしょうか?

webOpixel 2015-03-28 16:12 

遷移後の画面でクラスを割り当てておいて分岐などさせればできるような気がします。

LEAVE A REPLY

コードを書く場合は<pre>で囲んでください。