表示のエフェクト (4/4)
作成:2010-04-14 14:38
更新:2010-05-12 10:52
更新:2010-05-12 10:52
■スタイルシート操作によるアニメーション
視覚効果というのは、つまりは「なめらかにスタイルシートの値を変更することでエフェクトを表示する」というものです。例えばエレメントの縦横の幅や透過度を連続して変えていくことでエフェクトを作成しているのです。
jQueryには、そんなにたくさんの視覚効果メソッドが搭載されているわけではありません。が、こうした「スタイルシートの属性を操作してアニメーションさせる」という基本的な考え方がわかれば、あとは自分でいろいろな効果を作り出すことができます。それは「animate」というメソッドを使うのです。
第３引数にはどのように変化させるかを指定します。変化のさせ方がいろいろと用意されており、「この方式で変化させる」ということが選べるのですね。まぁ、これはよくわからなければ省略してかまいません。そして第４引数にはコールバック関すを用意することができます。
では、これもサンプルをあげておきましょう。あらかじめparams配列に、アニメーション用のパラメータを配列として用意しておき、クリックするごとにそこから順に連想配列を取り出してアニメーションをさせていきます。実際にやってみるとわかりますが、animateは位置や大きさ、フォントサイズ、透過度など、数値で表せるさまざまな属性を操作することができます。
ただし、すべての属性が操作できるわけではありません。数値で表現できないものは、アニメーションできないのです。この点、よく頭にいれておきましょう。
jQueryには、そんなにたくさんの視覚効果メソッドが搭載されているわけではありません。が、こうした「スタイルシートの属性を操作してアニメーションさせる」という基本的な考え方がわかれば、あとは自分でいろいろな効果を作り出すことができます。それは「animate」というメソッドを使うのです。
《jQuery》.animate( 連想配列 [, ミリ秒数] [, 変化] [, 関数] );いろいろと引数が用意されていますね。必須なのは、第１引数のみです。これは、スタイルシートの属性名をキーとする連想配列です。変更したいスタイルシートの属性名と値を連想配列にまとめて引数に渡すと、animateは現在の値から指定された値まで、スタイルシートの値をなめらかに変化させていくのです。第２引数には、アニメーションにかかる時間を指定します。第３引数にはどのように変化させるかを指定します。変化のさせ方がいろいろと用意されており、「この方式で変化させる」ということが選べるのですね。まぁ、これはよくわからなければ省略してかまいません。そして第４引数にはコールバック関すを用意することができます。
では、これもサンプルをあげておきましょう。あらかじめparams配列に、アニメーション用のパラメータを配列として用意しておき、クリックするごとにそこから順に連想配列を取り出してアニメーションをさせていきます。実際にやってみるとわかりますが、animateは位置や大きさ、フォントサイズ、透過度など、数値で表せるさまざまな属性を操作することができます。
ただし、すべての属性が操作できるわけではありません。数値で表現できないものは、アニメーションできないのです。この点、よく頭にいれておきましょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<script src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
<!--
var counter = 0;
var params = [
{width:"400px",fontSize:"24pt",opacity:1.0},
{width:"300px",fontSize:"18pt",opacity:0.6},
{width:"200px",fontSize:"12pt",opacity:0.3}
];
function doAction(){
counter++;
if (counter == params.length) counter = 0;
$('#target').animate(params[counter],3000);
}
//-->
</script>
</head>
<body>
<H1>TEST.</H1>
<div id="target" onclick="doAction();"
style="background:#66FF66; font-size:24;">
animate effect.
</div>
</body>
</html>
※関連コンテンツ