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

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

2009-01-19 (月)
技術

JavaScriptでロールオーバーアニメーションとJavaScriptでロールオーバーアニメーション Part2に引き続きであんまり変わっていないんですが、こうゆうのも面白いかも。

今までは高さ20pxのdivタグを横にスライドさせていて、いわゆるプログレスバーっぽさがあったのですが、今回は高さ0pxにしておいて横にスライドするタイミングでじょじょに高さ20pxになるようにしてみた。

<!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", 200 + "px")
			.animate(
				{width: 250 + "px", height: 20 + "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", height: 0 + "px"},
						{queue: true, duration: "slow", easing: "easeInOutBack", complete: function(){}}
					);
			}, 500);
			return;
		}
		elem
			.animate(
				{width: 0 + "px", height: 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: 0px;
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>

続きで動作確認。

こうすると枠の中からのスライドという感じより、出現という表現のほうが近い気がする。
ボクはこっちのほうが好きですｗ

Comments:1

kei 2009-03-14 (土) 13:31

こんにちは。
よい感じのロールオーバーがないかと探していてたどり着きました。

個人的にはPart2の動きが気に入りましたｗ
が、残念ながらIE6、7（正規版とIEtester）だと正常に動作してくれませんでした。。
こちらのサイトと、自分で設置したのとで確認しました。
で、動作がおかしくなるのがmouseOutの時なので試しにeaseInOutBackをeaseInOutExpoにしたところ
動作するっぽいです。

jQuery、というかJavascript自体全然わからないのですが、
jQuery Easing Pluginのテストページ（http://www.regulus8.com/blog/wp-content/uploads/2007/12/easingtest.html）
で確認した所、easeInOutBackはIE系では普通に動作するようでした。
なのでロールオーバースクリプトのどこかに問題がありそうですが、全然わかりません＞＜

それとも私の環境だけでしょうか・・・。

一応、ご確認して頂ければ幸いです。

Trackback:0

TrackBack URL for this entry: http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1150
Listed below are links to weblogs that reference: JavaScriptでロールオーバーアニメーション Part3 from HouseTect, JavaScript Blog

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

RSS Feeds

Search

Recent Entries

このブログについて

author：hisasann.com

description：就職しました！
最近はJavaScript、Perl、Rails、Java（Struts+Spring+iBatis）なんかをいろいろといじっています。
今猛勉強中なのがActionScriptです。
アニメーション楽しい！

他に運営しているブログ：

利用しているWebサービス :

Tag cloud

カテゴリー

月別アーカイブ

jQuery Meetup

Visit jQuery Meetups

Page Top