Home > 技術 > JavaScriptでロールオーバーアニメーション Part2

JavaScriptでロールオーバーアニメーション Part2

2009-01-16 (金)
技術

JavaScriptでロールオーバーアニメーションに引き続きマウスオーバー時のアニメーションをJavaScirptで実装しています。

trick7 - ロールオーバー効果へのこだわり2を読んで、dajistudioさんのサイトのアニメーションで気になっていたことがすべて分かった。

たとえばいっきにマウスオーバーした場合は、すこしアニメーションが遅れる。
ただし1つ1つゆっくりとマウスオーバーするとアニメーションに遅れはない。

このレベルは使っている人はほとんど見つけられないと思うけど、なんだか心地よい感じがするのは確かだろうね。
無意識に作用するアニメーションほどかっこいいものはないっ！

なので、この遅延アニメーションをJavaScriptで実装しました。
たぶんタイマーを使っているんじゃないのかな？本家のほうは。

JavaScriptソースコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
//![CDATA[

$(function(){
	for(var i = 1; i <= 5; i++){
		$("#tweenFrame" + i)
			.bind("mouseover", {index: i}, mouseOver)
			.bind("mouseout", {index: i}, mouseOut);
	}
	
	function mouseOver(event){
		var elem = $("#tween" + event.data.index);
		$.data(elem.get(0), "anime", true);
		elem
			.css("width", "200px")
			.animate(
				{width: 250 + "px"},
				{queue: true, duration: "slow", easing: "easeOutExpo", complete: function(){
					$.data(elem.get(0), "anime", false);
				}}
			);
	}
	
	function mouseOut(event){
		var elem = $("#tween" + event.data.index);
		if($.data(elem.get(0), "anime")){
			setTimeout(function(){
				elem
					.animate(
						{width: 0 + "px"},
						{queue: true, duration: "slow", easing: "easeInOutBack", complete: function(){}}
					);
			}, 500);
			return;
		}
		elem
			.animate(
				{width: 0 + "px"},
				{queue: true, duration: "slow", easing: "easeOutExpo", complete: function(){}}
			);
	}
});

//]]
</script>
<style>
<!--

.tweenFrame {
width: 250px;
height: 20px;
margin: 3px;
position: relative;
}

.tweenbg {
width: 250px;
height: 20px;
background-color: #C8FFE3;
position: absolute;
top: 0;
left: 0;
z-index: 1;
filter:alpha(opacity=50);	/*IE*/
-moz-opacity:0.5;	 		/*Firefox*/
opacity:0.5;				/*Safari*/
margin: 0px;
padding: 0px;
}

.tween {
width: 0px;
height: 20px;
background-color: #00F9BB;
position: absolute;
top: 0;
left: 0;
z-index: 0;
margin: 0px;
padding: 0px;
}

-->
</style>
<div id="frame">
	<div id="tweenFrame1" class="tweenFrame">
		<div id="tweenbg1" class="tweenbg"></div>
		<div id="tween1" class="tween"></div>
	</div>
	<div id="tweenFrame2" class="tweenFrame">
		<div id="tweenbg2" class="tweenbg"></div>
		<div id="tween2" class="tween"></div>
	</div>
	<div id="tweenFrame3" class="tweenFrame">
		<div id="tweenbg3" class="tweenbg"></div>
		<div id="tween3" class="tween"></div>
	</div>
	<div id="tweenFrame4" class="tweenFrame">
		<div id="tweenbg4" class="tweenbg"></div>
		<div id="tween4" class="tween"></div>
	</div>
	<div id="tweenFrame5" class="tweenFrame">
		<div id="tweenbg5" class="tweenbg"></div>
		<div id="tween5" class="tween"></div>
	</div>
</div>

jQueryのdataメソッドを使って、マウスオーバーのアニメーションが終わっているのかどうかのフラグ判定しています。
これにより、マウスオーバー直後にマウスアウトしてもアニメーションは終わっていないので、このタイミングで遅延アニメーションを実行します。

続きで動作確認。