Effectsの簡単なサンプル
Effectsとして、表示/非表示の切り替えや移動などのアニメーションをさくっと実装するための機能が提供されています。様々なエフェクトがAPIとして用意されていますが、基本的に以下の引数を指定できるようになっています。
- 第一引数 .. アニメーションする時間 or 速度
- 数値を指定した場合、その時間内で完了するようにアニメーションします。単位はミリ秒です。
- 文字列で"slow", "normal","fast"のいずれかを指定することも可能。
- 第二引数 .. アニメーション完了時に呼び出されるコールバック関数を指定できます。
以下はtoggle()で表示/非表示を切り替えるサンプルです。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="./jquery-1.3.2.js"></script> <script type="text/javascript"> function toggle() { // 表示/非表示を切り替える // 第一引数でアニメーションする時間(以下の例だと500msで完了するようにアニメーションする) // 第二引数でアニメーション完了時に呼び出す関数を指定できる。 $("#box").toggle( 500, function(){ $("a").text( this.style.display == "none" ? "表示する" : "隠す" ); }); } </script> </head> <body> <a id="a" href="javascript:toggle();">隠す</a> <div id="box" style="margin:10px;width:100px;height:100px;background-color:#6666cc;"><div> </body> </html>
