デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.animate( prop )オリジナルアニメーションの実行

構文

オリジナルアニメーションの実行返値:jQueryオブジェクト
jQo.animate( 属性 [,期間] [,イージング] [,function] )ver1.0〜
・属性:変更したいcss属性をObjectオブジェクトで指定
・期間:目的の値までの期間をミリ秒で指定
・イージング:アニメの加速度のタイプを指定
・function:アニメの完了後に実行するコールバックを指定

機能

jQueryオブジェクトで指定した要素の属性を個別にアニメーションさせます操作できる属性はwidthなど数値で設定できるものだけで、background-colorといった非数値の属性は操作できません設定できる値には%やemなどの単位が利用できます。さらに値に「+=」や「-=」を利用することで、相対的に値を変更することができます。引数が多く設定できますが、第1引数以外は省略することができます。

animateメソッドには、もう1つ構文があるのですが機能が多いので次のページにまとめています。
jQueryのアニメ処理は実行と同時に開始されるのではなく、キューという仕組みで管理され順次再生されていきます。これに関しても次のページで説明します。

解説

操作したい属性はobjectオブジェクトで設定

animeteメソッドの第1引数にはアニメさせたい属性を設定するのですが、objectオブジェクトを利用しなければなりません。面倒に見えますが、複数の属性をまとめて設定できるので高度なアニメを実行することができます。

サンプル(animate1/01.html)を開いてbody内にdiv要素とbutton要素があることを確認してください。jQueryでは、まず以下のanimateメソッドの部分を確認して下さい。buttonをクリックしたらdiv要素をobjectオブジェクト「animeObj」の設定に基づきアニメさせます。

$("button").click(function(){
	$("div").animate(animeObj);
});

animeObjは以下の様に設定され、widthとheightの2つの属性がそれぞれ200に設定されています。属性名はcssの属性名に従いますが、「margin-top」のように途中にハイフンがある属性は「margiTop」キャメルケースに変更しなければなりません。ページ最下部にあるメモにサンプルがあるので後で確認して下さい。

var animeObj = new Object();
animeObj.width = 200;
animeObj.height = 200;

結果として、buttonをクリックすると、div要素の高さと幅がアニメで200pxに拡大します。
属性を設定するobjectオブジェクトは引数の中に直接設定してもOKです。→サンプル(animate1/01b.html

$("button").click(function(){
	$("div").animate({width:200, height:200});
});

期間を設定してアニメの速度を変更する

第2引数に期間(ミリ秒)を設定すると、指定された時間で要素を縦方向に拡大して表示します。省略した場合は「400ミリ秒」に設定されます

サンプル(animate1/02.html)を開いてbodyの構成がanimate1/01.htmlと同じ事を確認して下さい。jQueryもほとんど同じで、異なるのは以下の様にanimateメソッドの引数に期間「3000」が設定されている点だけです。

$("button").click(function(){
	$("div").animate(animeObj, 3000);
});

結果として、buttonをクリックすると3秒(3000ミリ秒)かけてdiv要素がアニメーションします。

イージングの設定

第3引数にイージングの設定をするとアニメの加速度を変更できます。jQueryが利用できるイージングは「swing」と「linear」の2種類しかありません。デフォルトは「swing」です。イージングの種類はプラグインを追加することで増やすことができます。→プラグイン「イージングの追加

サンプル(animate1/03.html)を開いてbody内の構成がanimate1/02.htmlと同じ事を確認してください。jQueryもほとんどanimate1/02.htmlと同じで、異なるのは以下の様にanimateメソッドの引数にイージング「linear」が追加された点だけです。

$("button").click(function(){
	$("div").animate(animeObj, 3000, "linear");
});

結果として、buttonをクリックすると「等速」でアニメが再生されます。違いが分かりにくいので、イージングの「swing」と「linear」を比較できるサンプルを作成しました。

サンプル(animate1/03b.html)ではbutton要素をクリックすると、id属性がswingと設定された方は「swing」のイージング、id属性がlinearと設定された方は「linear」のイージングで演出されます。あまり違いは分からないかもしれませんが、linearは等速で演出し、swingは徐々に加速後、徐々に減速します。

コールバックの設定

第4引数にfunctionを設定することで、アニメが完了した後にfunctionを実行することができます。
サンプル(animate1/04.html)を開いてbody内の構成がanimate1/03.htmlと同じ事を確認してください。jQueryは少し変更されています。まずはanimateメソッドを確認して下さい。以下の様にanimateメソッドの引数にfunction「alertFunc」が設定されています。

$("button").click(function(){
	$("div").animate(animeObj, 3000, "linear", alertFunc);
});

そしてalertFuncは、以下の様にアラートで「Animation complete.」と表示するだけです。

function alertFunc(){
	alert("Animation complete.");
};

結果として、buttonをクリックするとdiv要素が拡大し、アニメが完了するとアラートで「Animation complete.」と表示されます。

functionは無名関数を利用して、直接設定することができます。→サンプル(animate1/04b.html

$("div").animate(animeObj, 3000, "linear", function (){
	alert("Animation complete.");
});

関連項目

animateメソッドには、より高度な設定ができる構文があります。合わせて確認して下さい。
animate(prop, option)

メモ

引数の省略について

animateメソッドにはたくさんの引数が設定できますが、引数の省略には注意が必要です。例えばanimate1/04.htmlで、期間とイージングの設定をしたくない場合はサンプル(animate1/test01.html)のように期間やイージングを省略してfunctionを詰めて設定できます。

$("button").click(function(){
	$("div").animate(animeObj, alertFunc);
});

しかし期間を省略してイージングの設定をすることはできません。サンプル(animate1/test01b.html)を開いてbody内に2つのdiv要素があることを確認してください。2つのdiv要素は以下の様にid属性がlinearとdefaultに設定されています。

<button>click</button>
<div id="linear"></div>
<div id="default"></div>

jQueryは以下の様に記述され、2行目(id属性がlinear)の処理では期間を省略して設定しています。しかし3行目では期間を省略しないで設定しています。期間のデフォルト値は400ミリ秒なので、2つの処理は同じにならないといけません。

$("button").click(function(){
	$("div#linear").animate({"width":300}, "linear");
	$("div#default").animate({"width":300},400, "linear");
});

しかしbuttonをクリックすると2つの処理は異なり、上のdiv要素(期間を省略した方)はイージングがlinearではなくswingになってしまってい、正常に機能していないことが確認できます。これは期間の設定も文字で「slow」などと設定できるため(次の項目で説明)、linerという文字列を期間と認識するためです。

少々ややこしいですが、このanimateメソッドの構文では期間を省略してイージングを設定できないと覚えておいて下さい。もし期間を設定したくない場合はサンプル(animate1/test01c.html)のように「false」を設定することで対応できます。

$("button").click(function(){
	$("div#linear").animate({"width":300},false, "linear");
	$("div#default").animate({"width":300},400, "linear");
});

期間の設定について

期間の設定には「slow」「fast」といったキーワードも利用することができます(fastは200ミリ秒、slowは600ミリ秒)。サンプル(animate1/test02.html)では以下の様に引数に「slow」を設定しています(文字列なのでクォートを忘れずに)。

$("button").click(function(){
	$("div").animate(animeObj, "slow");
});

結果として、buttonをクリックすると「ゆっくりめ」に表示されます。

属性の値にキーワードが利用できる

objectオブジェクトに設定する属性の値には、hide、show、toggleのキーワードが利用できます。hideは属性の値を0にし、showは変更された属性の値を元の値に戻します。この2つのキーワードはあまり利用しないかもしれませんが、これから紹介するtoggleは便利かもしれません。

キーワードのtoggleは、表示している時はhideを実行し、隠れている時はshowを実行します。
サンプル(animate1/test03.html)を開いて下さい。body内の構成はanimate1/01b.htmlと同じで、jQueryも以下の様に200の値が"toggle"に変更されているだけです。

$("button").click(function(){
	$("div").animate({width:"toggle", height:"toggle"});
});

結果として、buttonをクリックするたびにdiv要素が隠されたり表示されたりします。

属性ごとにイージングを設定する

属性の値に利用したキーワードには個別にイージングの設定を追加することも可能です。この場合は属性の値に配列を設定して、1番目の要素に属性の値、2番目の要素にイージングの設定をします。

サンプル(animate1/test04.html)を開いて下さい。body内の構成はanimate1/01b.htmlと同じで、jQueryは少々変更され、以下の様に変更されています。ポイントはwidthやheightに配列が設定されている点です。この設定によりwidthはswingのイージングで200pxになり、heightはlinearのイージングで200pxになります。
※アニメが確認しやすいように期間を3000と長く設定しています。

$("button").click(function(){
	$("div").animate({width:[200,"swing"], height:[200,"linear"]}, 3000);
});

結果として、buttonをクリックすると(分かりにくいかもしれませんが...)幅と高さが異なる加速度でアニメします。この構文は属性の値に「trigger」等のキーワードを利用した時にも利用できます。
→サンプル(animate1/test04b.html

$("button").click(function(){
 $("div").animate({width:["toggle","swing"], height:["toggle","linear"]}, 3000);
});

相対的に値を変化させる

属性の値を設定する際に「+=」や「-=」を数値の前におくと相対的に値を変化させることができます。これはjavaScriptの複合代入子と同じですが変数と組みあわせる必要はありません。javaScriptでは「x+=10」と変数に続けて「+=」を書きますが、animateメソッドでは変数名を設定しません。

サンプル(animate1/test05.html)を開いてbody内の構成がanimate1/01b.htmlと同じ事を確認して下さい。jQueryもほとんど同じですが、以下の様にanimateメソッドの属性の値の部分に「+=」を利用しています。値は文字列として設定するのでクォートが必要なことに注意して下さい

$("button").click(function(){
	$("div").animate({width:"+=20", height:"+=20"});
});

結果として、buttonをクリックする度に幅と高さが20pxずつ増えていきます。

位置を変更する時はcssのposition属性(static以外)を設定すること

属性にleft(X座標)やtop(Y座標)を利用すれば、位置を移動することが可能なのですがcssのpositionをstatic以外に設定しておかないと機能しません(デフォルトはstaticのため、省略した場合も機能しません)。まずは正常に機能するサンプル(animate1/test06.html)を開いて、開いてbody内の構成がanimate1/01b.htmlと同じ事を確認して下さい。

jQueryは以下の様に記述され、buttonをクリックするとdiv要素のleft属性を20ずつ足して「右に移動する」ようにしました。

$("button").click(function(){
	$("div").animate({left:"+=20"});
});

結果として、buttonをクリックするたびdiv要素が右に20pxずつ移動します。ここでポイントなのは以下の様に移動させるdiv要素のcss設定にpositionの設定(static以外)をしていることです。

div{
	position:relative;
	width:50px;
	height:50px;
	color:#fff;
	background-color:#09C;
}

試しにpositionをstaticに設定したサンプル(animate1/test06b.html)を用意しました。positionの設定以外はすべてanimate1/test07.htmlと同じなのに、buttonをクリックしてもdiv要素が移動しないことが確認できます。positionの設定を省略するとデフォルトのstaticになるため、移動させる際にはstatic以外を設定するようにしてください

div{
	position:static;
	width:50px;
	height:50px;
	color:#fff;
	background-color:#09C;
}

属性の値に%を利用する時の注意

属性の値を%で設定することができますが、これは元の大きさを100%とした設定ではないことに注意して下さい。属性はcssのものですから、cssのルールに従います。例えばbody内に配置されたdiv要素の高さと幅を100%に設定したら、配置されたbody要素を基準に設定され、body要素を100%満たすサイズになります。
→参考:サンプル(animate1/test07b.html※jQueryは利用していません。

ですから、animateメソッドのwidth属性とheight属性の値を100%にすると、最終的にはanimate1/test05b.htmlと同じになります。サンプル(animate1/test07.html)を開いてdiv要素をクリックしてanimate1/test05b.htmlと同じになることを確認してください。

$("div").click(function(){
	$("div").animate({width:"100%", height:"100%"});
});

%やemなどの単位を利用する時は、上記のようにクォートが必要なことに注意して下さい。

display属性がnoneの要素を表示することはできません

fadeOutメソッドslideUpメソッド等は、要素が隠れるとcss設定のdisplay属性をnaneにして表示しないようにします。そのため、表示するためのメソッドfadeInメソッドslideDownメソッドにはdisplay属性のnoneを解除してから演出するようになっています。

しかしanimateメソッドはdisplay属性のnoneを解除しないため、fadeOutメソッド等で隠した要素を表示することができません。サンプル(animate1/test08.html)を開いて、div要素がすぐにアニメで消えていくことを確認して下さい。これは以下のようにhideメソッドを利用して、最初はdiv要素を隠すようにしているためです。

$("div").hide(1000);

続いて以下の部分を確認して下さい。buttonをクリックすると隠されたdiv要素の幅や高さを200pxにするようにしています。しかしbuttonをクリックしてもdiv要素は表示されません。これはdisplay属性がnoneに設定されたままなので表示されないためです。

$("button").click(function(){
	$("div").animate({width:200, height:200});
});

この問題を回避するために、animateメソッドの前にdisplay属性のnoneを解除しても思うような結果にはなりません。それはdisplay属性の設定を元に戻した瞬間に、元の高さと幅で表示されるためです。

サンプル(animate1/test08b.html)ではbuttonをクリックすると、以下のようにcssメソッドを利用してdisplay属性をdiv要素本来の「block」に戻しています。

$("button").click(function(){
	$("div").css("display","block");
});

結果として、buttonをクリックすると元のサイズでdiv要素が表示されます。ですので、これに続いてanimateメソッドを利用すると0pxから200pxに拡大するのではなく、いきなり元のサイズでdiv要素が表示され、そこから200pxに拡大します。→サンプル(animate1/test08c.html

ということで、fadeOutにはfadeIn、slideUpにはslideDownと、それぞれに対応したメソッドを利用したほうが良いでしょう。

ハイフンを含む属性を利用する際の注意

名前に-(ハイフン)が含まれる属性はハイフンを外し、続く最初の文字を大文字(いわゆるキャメルケースの形)にする必要があります。例えばmargin-topであればmarginTopにしなければなりません。

サンプル(animate1/test09.html)を開いてbody内の構成がanimate1/01b.htmlと同じ事を確認して下さい。jQueryもほとんど同じですが、以下の様に属性が変更され「marginTop」となっています。

$("button").click(function(){
	$("div").animate({marginTop:200});
});
属性の名前は本来の「margin-top」から「marginTop」に書き換えられていますが、buttonをクリックすると上マージンが変化し、正常に機能することが確認できます。

一応ハイフン付きでは機能しないことも確認します。サンプル(animate1/test09b.html)では以下の様にハイフン付きの「margin-top」と設定していますが、buttonをクリックしても機能しないことを確認してください。

$("button").click(function(){
	$("div").animate({margin-top:200});
});

これはハイフンがマイナスと判断され「margin - top」という数式として認識されてしまうためだと思います。