クリックしてコンテンツをフェードイン・フェードアウトで切り替える

AJAXネタ。prototype.js と scriptaculous.js を使うとコンテンツの内容をフェードイン・フェードアウトしながら切り替えることができる。これを使えば、Flashを使用しなくても簡単にページ遷移なし・アニメーションでコンテンツを展開することが可能。

時間毎に内容が切り替わるというのがあったので、これを参考に、クリックすると切り替わるように変更してみた。

サンプルと、動作コードは続きを読むで。

ライブラリをダウンロード

script.aculo.usからライブラリをダウンロード。解凍して出てきた srcフォルダと libフォルダを適宜設置し、準備は完了。すでに prototype.js を利用している場合は、 libフォルダは必要ない。

スクリプトを読み込む

<style type="text/css">
.fade-box {
	position: absolute;
	width:500px;
	height:200px;
}
</style>
<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="src/scriptaculous.js"></script>
<script language="javascript">
	var divs_to_fade = new Array('box-1', 'box-2', 'box-3');
	function swapFade(i,j) {
		Effect.Fade(divs_to_fade[i], { duration:1, from:1.0, to:0.0 });
		Effect.Appear(divs_to_fade[j], { duration:1, from:0.0, to:1.0 });
	}
</script>

コンテンツのボックスを用意する

<div class="fade-box" id="box-1">
	<p><img src="images/fadeinout1.jpg" alt="イメージ例"></p>
	<h3>コンテンツボックスの１</h3>
	<p>あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。</p>
	<ul>
		<li>ボックス1</li>
		<li><a href="javascript:swapFade(0,1);">ボックス2</a></li>
		<li><a href="javascript:swapFade(0,2);">ボックス3</a></li>
	</ul>
</div>
<div class="fade-box" id="box-2" style="display:none;">
	<p><img src="images/fadeinout2.jpg" alt="イメージ例"></p>
	<h3>コンテンツボックスの２</h3>
	<p>かきくけこ。かきくけこ。かきくけこ。かきくけこ。かきくけこ。かきくけこ。かきくけこ。かきくけこ。かきくけこ。かきくけこ。かきくけこ。かきくけこ。</p>
	<ul>
		<li><a href="javascript:swapFade(1,0);">ボックス1</a></li>
		<li>ボックス2</li>
		<li><a href="javascript:swapFade(1,2);">ボックス3</a></li>
	</ul>
</div>
<div class="fade-box" id="box-3" style="display:none;">
	<p><img src="images/fadeinout3.jpg" alt="イメージ例"></p>
	<h3>コンテンツボックスの３</h3>
	<p>さしすせそ。さしすせそ。さしすせそ。さしすせそ。さしすせそ。さしすせそ。さしすせそ。さしすせそ。さしすせそ。さしすせそ。さしすせそ。さしすせそ。</p>
	<ul>
		<li><a href="javascript:swapFade(2,0);">ボックス1</a></li>
		<li><a href="javascript:swapFade(2,1);">ボックス2</a></li>
		<li>ボックス3</li>
	</ul>
</div>