jqueryアニメーションにイージングをつけて画像をチラッと表示する方法【jquery.easing】

jquery.easing.1.3.jsを使って、ページ表示時に画像をチラッと表示させかつ動きにイージング（緩急）をつけて表示させる方法をご紹介します。

jquery.easing.1.3.jsを使って、ページ表示時に画像をチラッと表示させかつ動きにイージング（緩急）をつけて表示させるJavaScriptの記述

※jquery.min.js、jquery.easing.1.3.jsファイルを読み込みます。ページ表示時に画像をアニメーションでブラウザ内にチラッと表示させ、数秒後にブラウザ外に隠れる動きにしてます。

<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>

jqueryアニメーションにイージングをつけて画像をチラッと表示するCSSの記述

※デフォルトは画像（#idHeader #idLogo01）をブラウザ外に表示される様に設定してます。必要に応じて変更して下さい。

<style type="text/css">
<!--
body {
	margin: 0px;
	font-size:14px;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1em;
	text-align:center;
	padding:15px 0 0 0;
}
p{
	font-weight:normal;
	line-height:1.4em;
	text-align:center;
}
#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>

jqueryアニメーションにイージングをつけて画像をチラッと表示するHTMLの記述

※画像エリア（id=”idLogo01″）を用意します。必要に応じて変更して下さい。

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

	<h1>上記にてロゴ画像がイージングつきアニメーションでチラッと表示されます。</h1>
    <p>初期表示時は一旦ロゴ画像が出て表示され、<br>
    ブラウザ外に隠れますのでマウスオーバーで出てきます。<br>
    マウスアウトでまた隠れます。</p>

</div>

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

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

jquery.easing.1.3.jsプラグインソース元

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

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

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。