jQueryで作るマウスを乗せるとゆっくりアニメーションするボタン

11_8_9_1_1

マウスを重ねるとゆっくり変化するボタンがムーディーで良い!
マウスオーバーでパッと切り替わるボタンは良くありますが、こちらはFlashアニメーションのようにゆっくりとじわっと変化していくボタンをjQueryで実現する方法を紹介!

マウスを乗せるとゆっくりアニメーションするボタンサンプル


アニメーションの変化速度はhead部に記述する『$span.stop().fadeTo(500, 1);』部の変更することで変化が可能となります。

head部記述サンプル

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.otherbutton,.homebutton,.downloadbutton,.donatebutton').append('<span class="hover"></span>').each(function () {
	  		var $span = $('> span.hover', this).css('opacity', 0);
	  		$(this).hover(function () {
	    		$span.stop().fadeTo(500, 1);
	 		}, function () {
	   	$span.stop().fadeTo(500, 0);
	  		});
		});
	});
</script>

HTMLサンプル

<p>
<a href="#" class="otherbutton"></a>
</p>

<p>
<a href="http://www.tutorial9.net" class="homebutton"></a>
<a href="download.zip" class="downloadbutton"></a>
</p>

<div id="column1"><a href="#" class="donatebutton"></a></div>

CSSサンプル

/* Tuturial button*/
.button {
	width:570px;
	height:64px;
	display:block;
	background-image:url(images/downloadbutton.png);
	background-position: top;
}
.button:hover{
	width:570px;
	background-position: bottom;
	height:64px;
	background-image:url(images/downloadbutton.png) no repeat;
}

/* Tutorial button with jQuery */
.otherbutton {
	clear: both;
	position:relative;
	display:block;
	height: 64px;
	width: 570px;
	background:url(images/contact.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}
.otherbutton span.hover {
	position: absolute;
	display: block;
	height: 64px;
	width: 570px;
	background: url(images/contact.png) no-repeat;
	background-position: bottom;
}

/* Bonus buttons */
.downloadbutton {
	float: left;
	width:107px;
	height:38px;
	display:block;
	background-image:url(images/twobuttons.png);
	background-position: top right;
}
.downloadbutton span.hover{
	position: absolute;
	display: block;
	width:107px;
	height:38px;
	background-position: bottom right;
	background-image:url(images/twobuttons.png);
}
.homebutton {
	float: left;
	width:120px;
	height:38px;
	display:block;
	background-image:url(images/twobuttons.png);
	background-position: top left;
}
.homebutton span.hover{
	position: absolute;
	display: block;
	width:120px;
	height:38px;
	background-position: bottom left;
	background-image:url(images/twobuttons.png);
}

/* Donate button with jQuery */
.donatebutton {
	clear: both;
	position:relative;
	display:block;
	height: 128px;
	width: 128px;
	background:url(images/donate.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}
.donatebutton span.hover {
	position: absolute;
	display: block;
	height: 128px;
	width: 128px;
	background: url(images/donate.png) no-repeat;
	background-position: bottom;
}

/* Donate button without jQuery */
.donatebutton_alt {
	display:block;
	height: 128px;
	width: 128px;
	background:url(images/donate.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}
.donatebutton_alt:hover {
	height: 128px;
	width: 128px;
	background: url(images/donate.png) no-repeat;
	background-position: bottom;
}
/* End button effects */

一言

マウスオーバーで画像がパッと変わる今までのものより少し落ち着いた感じを演出できるというところがいいですね。画像が切り替わるスピードも変更することができるので自分好みにカスタマイズできる所も嬉しいです!

rss登録 rss登録 rss登録

コメント

コメントをお寄せください。

コメントの投稿

コメントフィード コメントフィード

トラックバックURL: http://select.rash.jp/jquery/498/trackback/