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

このエントリーをはてなブックマークに追加
索引
1章:jQuery入門
2章:jQuery基礎
3章:jQuery発展
番外編:研究

汎用的なアニメ(3)

概要

animateメソッドの別構文

animateメソッドには「汎用的なアニメ(2)」で紹介した構文とは別の構文があります。特徴的なのは以下の様に第2引数にもobjectオブジェクトを設定することです。

animateメソッドの構文(2)
$(セレクタ).animate(属性のオブジェクト,オプションのオブジェクト)
・属性のオブジェクトは構文(1)と同じです。
・オプションのオブジェクトでは以下のプロパティが設定できます、順番は決まっていません。
 ・duration:アニメの長さ(速度)
 ・easing:イージングの設定
 ・complete:コールバックの設定
 ・queue:キューの設定(次項で説明します)
 ・step:移動の度に実行する処理(次項で説明します)

第2引数の「オプションのオブジェクト」に設定する「queue」と「step」は、この構文でしか利用できないので覚える必要があります。

使い方は初心者向けの内容なので、設定できるオプションは基本的なものしか説明していません。詳細を確認したい方はリファレンスの.animate( prop, option )を確認してください。

解説

第2引数にもobjectオブジェクト

まずは「汎用的なアニメ(2)」で紹介したサンプル(animate2/03.html)を、今回の構文で書き換えたサンプルを紹介します。サンプル(animate3/01.html)のソースを開いてjQueryを確認してください。

//---animate2/03.htmlの例
$("#animeButton").click(function(){
	$("#animeTarget").animate({top: "200px"}, 1000, "swing", alertFunc);
});	
//---animate3/01.htmlの例
$("#animeButton").click(function(){
	$("#animeTarget").animate({top: "200px"}, 
	{duration:1000, easing:"swing",complete:alertFunc});
});	

2つのサンプルの違いは上記の様にオプションの設定方法です。animate3/01.htmlでは第2引数にobjectオブジェクトを設定します(オブジェクトなので{}を忘れないで下さい)。機能的には2つとも同じです。
※設定しているプロパティ(duration, swing, complete)は「概要」に記述した構文を確認してください。

animate3/01.htmlの構文の方がdurationやcomplete等のプロパティ名を覚えなくてはいけないので面倒ですが、この構文でしか利用できない機能があるため覚える必要があります。

キューの設定

前回あまり利用しないキュー(queue)を説明したのは、この構文でキューの設定ができるためです。jQueryのアニメはキューに追加され順々に実行されていきますが、オプションの設定によってキューに追加せず直ちにアニメを実行することができるのです。

サンプル(animate3/02.html)を開いて「汎用的なアニメ(2)」で紹介したサンプル(animate2/05.html)のソースと見比べて下さい。以下3行目の部分にオプションのオブジェクトが設定されている部分だけが異なります。

$("#animeButton").click(function(){
	$("#animeTarget").animate({left: "300px"});
	$("#animeTarget").animate({top: "300px"},{queue:false});
});

このqueueというプロパティにfalseを設定すると、キューには登録せず「直ちにアニメを実行」します。そのため最初に設定した横に移動するアニメの完了を待たずに下に移動するためナナメに移動します。もしキューに追加せず直ちにアニメを実行したい場合は、この設定を利用して下さい。

移動の度に実行する処理

この構文ではアニメが開始されてから完了するまで、連続的に処理を実行する設定が可能です。
サンプル(animate3/03.html)のソースを開いて以下のjQueryを確認して下さい。第2引数のobjectオブジェクトでstepプロパティにstepFuncが設定されています。stepプロパティに設定されたfunctionはアニメの処理中に連続的に実行されます

$("#animeButton").click(function(){
 $("#animeTarget").animate({left: "300px"},{duration:3000,step:stepFunc});
});

stepFuncは以下の様に記述され、2行目でcssメソッドを利用してid属性がanimeTargetの要素のleft属性の値(つまりX座標)を取得し、3行目のtextメソッドでid属性がanimeTargetの要素内に表示しています。

function stepFunc() {
	var myX = $("#animeTarget").css("left");
	$("#animeTarget").text(myX);	
}

結果として、青いdiv要素をクリックするとオレンジ色のdiv要素が移動しながらX座標の値を表示していきます。アニメ中に何か処理したい場合は、この設定を利用して下さい。
数値がピッタリ300pxで止まらないのは、移動よりも表示の処理の方が先に実行されているためです(つまり表示してから移動している)。なので実際にはきちんと300pxで停止しています。

2つの構文の使い分け

queueやstepの機能を利用しないのであれば、最初に紹介した構文の方がシンプルに記述できるので、そちらを利用しましょう。queueやstepの機能を利用したい時だけ、今回の構文を利用すればよいと思います。

これで2章「jQuery基礎」は完了です。次回からは利用頻度は少ないけれど、知っておいた方がよい知識を学ぶ「jQuery発展」に入ります。まずはイベントが要素間を伝わるイベントフローという仕様について説明します。