jquery.easing：アニメーションにイージングをつけて画像をチラッと表示 DAD UNION

ページ表示時に画像をチラッと表示させ、かつ動きに緩急（easing）をつけて表示させてみました。

Contents

1．JavaScriptの記述
2．CSSの記述
3．HTMLの記述

1．JavaScriptの記述

ロゴ画像を初期表示時はアニメーションでブラウザ内にチラッと表示させ、数秒後にブラウザ外に隠れる動きにしてます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
mode=1;

setTimeout("anime01()",500);

function anime02(){
	$(function(){
		$("#idLogo01").hover(function(){
			$(this).stop().animate({top:'0px'}, 600,'easeInOutCubic');
		},
		function(){
			$(this).stop().animate({top:'-70px'}, 600,'easeInOutCubic');
		});

	});
}

function mcheck(){
	if(mode==2){clearInterval("tid");anime02();}
}

function anime01() {	
	var openDelay = 500;
	var closeDelay = 2700;
	
	setTimeout(function(){$("#idLogo01").animate({top:'0px'}, 1000,'easeInOutCubic');}, openDelay);
	setTimeout(function(){$("#idLogo01").animate({top:'-70px'}, 600,'easeInOutCubic');}, closeDelay);
	mode=2;
	
	return;
}

tid=setInterval("mcheck()",3000);
</script>

2．CSSの記述

デフォルトはロゴ画像をブラウザ外に表示される様に設定してます。

<style type="text/css">
<!--
#idHeader{
	width:70px;
	margin:0 auto;
}
#idHeader a img{
	position:relative;
	z-index:10;
}
#idHeader #idLogo01{
	position:relative;
	top:-70px;
	cursor:pointer;
}
#idHeader #idLogo01 img{
	z-index:1;
	position:relative;
}
-->
</style>

3．HTMLの記述

<div id="idWrap">

<div id="idHeader">

<div id="idLogo01"><a href="/" title="DAD UNION" target="_blank"><img src="logo01.jpg" alt="DAD UNION" width="70" border="0"></a></div>

</div>

</div>

jquery.easing.1.3.jsプラグイン元：jQuery Easing Plugin (version 1.3)
Easingエフェクトの種類：Easing/jQuery

jQueryアニメーションにイージングをつけて画像をチラッと表示のデモ

Flashを使用した演出のサイトを、jQueryのアニメーション使って演出ってことをいくつかやってきましたが、Flashのノリで演出をコロコロ変えてリクエストされるとついていけないあるある。