アニメーションを利用する方法 ～ Scriptaculous の利用

まずはデモを試してみてください。下記のフォームで、Show Options をクリックすると、追加入力項目が表示されます。

このデモのように、スライドして HTML 要素を表示するようなアニメーション視覚効果を利用したい場合は、 scriptaculous を利用すると便利です。

Scriptaculous

ダウンロード

こちらのサイトからダウンロード可能です。

script.aculo.us
http://script.aculo.us/
ダウンロードページ

使い方

上記ページでダウンロードしてきたアーカイブを展開します。その中の src ディレクトリに必要なスクリプトがあります。 ダウンロードしてきた scriptaculous で使われている prototype.js は lib ディレクトリにあります。利用するときは、 ただ、次のようにスクリプトをインクルードするだけです.

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>

サンプルコード

scriptaculous の一番の魅力はなんといっても使い方が簡単だということです。 上記例のように HTML 要素をスライド・アップ/ダウンさせるには、下記のように書きます。

スライド・ダウンの場合:

Effect.SlideDown('elm_id', { duration:0.2 });

スライド・アップの場合:

Effect.SlideUp('elm_id', { duration:0.2 });

このように Effect にはその他、Effect.BlindUp, Effect.DropOut,... など多数のメソッドが 用意されています。script.aculo.us のページのデモをご覧になるといいでしょう。

参考のため、上記デモのコードを以下に記載します。

var g_sliding = false;
var g_show = false;

Event.observe(window,'load',window_onload,false);

function window_onload(evt){

	Event.observe('option_label','click',label_onclick,false);
	$('option_label').onselectstart = function () { return false; };
	
}


function label_onclick(evt){

	toggle_option();

}

function toggle_option(){

	if(g_sliding){
		return;
	}

	if(g_show){
		g_sliding=true;
		Effect.SlideUp('form1_option', { duration:0.2 });
		set_label('Show Options');
		setTimeout('g_show=false;g_sliding=false;',300);
	}
	else{
		g_sliding=true;
		Effect.SlideDown('form1_option', { duration:0.2 });
		set_label('Hide Options');
		setTimeout('g_show=true;g_sliding=false;',300);
	}
}

function set_label(s){
	$('option_label').innerHTML = s;
}

連続クリックなどに備えて、ちょっとコードが増えています。g_sliding フラグで、 アニメーションの実行中か否か判断し、g_show フラグでオプションが表示かどうか判断します。