jQueryを使ってアハ体験？？

復活第2回目となりました、ウェブラボ技術メモです。

今回はなんと自作のjQueryとなります。

少し前にテレビやゲーム等で流行った、アハ体験をjQueryを使って再現致しました。

DEMOはこちら

今回使用させて頂いた画像は、友人のペットのフェレットです。

フェレットばかりに目がいってしまうと、画像の変化になかなか気が付かないかもしれませんね笑

ヒントも出るようになってますので、ぜひ画像の変化を探してみてください！

仕組みは至って簡単です。

jQueryを使って、画像をフェードイン・フェードアウトさせているだけです。

こちらのDEMOには、ソースを見ただけでは答えがわからないように、背景画像を使ったりしていますが、

基本は画像を2枚並べて、フェードイン・フェードアウトをさせれば完成です。

簡単に作った場合下記のようになります。

HTMLはこちら

<div id="wrapper">
	<p class="img01"><img src="○○" width="980" height="○○" alt="○○"></p>
	<p class="img02"><img src="○○" width="980" height="○○" alt="○○"></p>
</div>

CSSはこちら

#wrapper {
	width: 980px;
	margin: 0 auto;
	position: relative;
}

#wrapper .img01 {
	position: absolute;
	top: 0;
	left: 0;
}

#wrapper .img02 {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}

jQueryはこちら

setTimeout(function(){
	$('.img02').fadeIn(2000);
},2000)

DEMO等は自由に使って頂いて構いません。

※これらを使用して、起きたいかなる不具合・問題等に関しましては、弊社は一切責任を負いません。予めご了承下さい。