10 | 2009/11 |  12

  1. 無料サーバー

search phpbb-phpbb-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載！

以前の頁(1)
 | 
ホーム(2)


jquery.js のアニメーションコードの活用 ( 4 ) slideToggleEx プラグインの簡便な活用のために（完全版）

slideToggleEx プラグインは不完全だった

エントリイNo.731 において、slideToggleEx 自作プラグインメソッドについて詳述しました。

ところが、そこで紹介したプラグインメソッドコードは不完全でした。隠蔽状態から起動するアニメーション対応を全く考慮していなかったので、その状態で起動すると思わぬ動きをしてしまうのです。つまり、実は半分しか完成していないのでした。（＾＾；；　ヒヤアセ

そのことに気がついたのは 9 月中旬。その時点から、改めてコード全体を見直さざるを得なくなり、改めて animate メソッドの再学習を迫られたのです。

その後一ヶ月余り。四苦八苦、七転び八起きを繰り返した末に、昨晩やっと隠蔽状態からの起動にも対応した slideToggleEx 版が完成したので、ここに投稿することにします。

用意するもの・ことは以下の 5 つです。（この部分は No.731 の再掲）
  1. include 用 slideToggleEx プラグインファイルと include タグ要素
  2. slideToggleEx が適用されるタグ要素
  3. 起終点を右側にする場合には、対象タグ要素に width スタイル属性を設定します。また起終点を下にする場合には height スタイル属性を設定します。そうしないと animate メソッドの中で適正な幅や高さが計測されない場合があるためです。
  4. slideToggleEx を呼び出し、適用させるタグ要素（一般的には button タグでしょう）
  5. その button タグのクラス属性に fireSlideToggleEx-n を追加します。（ n は 0 から 8 の整数）

n は起終点を意味し次の通りの意味を持ちます。

0：ボックスの中心、1：左上端、2：右上端、3：右下端、4：左下端、
5：上辺、6：右辺、7：下辺、8：左辺

これだけ設定すれば、トリガーである button をクリックすると、n で指定した位置を起終点として、トリガーボタンの直後に配置された要素が slideToggleEx 適用対象要素となり、隠蔽されたり表示されるようなコード（ エントリイ末尾に掲載 ）を書きました。

「 これだけ 」と言っても結構たくさんあるため、最初は面倒に感じますが、直ぐに慣れますし、実際に使ってみると決して大変な手間ではありません。

必要な HTML 構造（この部分も No.731 の再掲）

上の 5 つだけで、slideToggleEx プラグインが簡単に使えるようにするために、もう１つ該当部分の HTML 文を特別な構造にする必要があります。これが 6 つ目にして最後の要件となります。その要件とは起動ボタンの直ぐ後に slideToggleEx 対象要素があるということです。

そうでない場合には 個々に slideToggleEx メソッドを呼び出すコードを書くことになります。

該当部分の HTML を以下のいずれかにする必要があります。（いずれのケースもボックスの左上を起終点とする場合で例示します。）

■ケース 1
<div><button class="fireSlideToggleEx-1">起動ボタン</button></div>
<div>・・・slideToggleEx対象要素・・・</div>

■ケース 2
<button class="fireSlideToggleEx-1" style="display:block;width:120px;">起動ボタン</button>
<div>・・・slideToggleEx対象要素・・・</div>

※ 2 行目の div 要素は別に div でなくてもブロック要素ならば何でも構いません。

ケース 1 は一般的な button タグの使い方の場合です。つまり button タグを inline 要素として配置する場合の HTML 文です。この場合には button タグの親要素の next sibling ブロック要素が slideToggleEx メソッドの適用対象となるようにコードを作りました。

一方ケース 2 は button タグをブロック要素として配置する場合です。この場合には当該のボタンタグの next sibling ブロック要素が slideToggleEx メソッドの適用対象となるようにコードを作りました。

このような当然と思われるHTML文構成にしておけば、運用に当たってどのようにしたかを思い出すのも容易ですし、仮に構造を忘れても直感的に思い出すことが可能となります。

▲ToTop

以上の前提で作った slideToggleEx プラグイン活用コード

アニメ継続時間と easing 関数は、後述する 「 click イベントを登録し slideToggleEx メソッド適用対象をピックアップするコード 」 において、1 秒に設定し、easing は無指定としています。このコードを弄れば自在に継続時間と easing 関数は変更できますが、使う際にその都度 duration と easing 関数を変更する必要はないと考え、(1) トリガーとなるボタンタグと (2) slideToggleEx 対象のブロックタグ、及び (3) slideToggleEx-n クラス名を指定するだけで使えればよいと判断しました。

以下に掲載したコードリストの表示と隠蔽には、当然 slideToggleEx を適用しています。直下のボタンをクリックすると、 slideToggleEx メソッドが起動し、アニメ対象要素であるコードリストが当該要素の右上から展開し、再びボタンをクリックすると右上へ隠蔽されます。（ 起終点＝ 2 ）

コードには各行に詳細な説明を記述したので、何を行っているのか分かると思います。

■プラグイン slideToggleEx() メソッドコード（完全版）
  0:// jQuery plugin : slideToggleEx() Release at 2009.8.21, ver 1.1:9.9, 1.3TheLastVer:10.9 01:00am
  1:(function($){
　　// アニメーションコードの性格を簡単に記述しておく
  2:var ver="relative animation under position relative";
　　// プラグイン指定
  3:$.fn.slideToggleEx = function( type, duration, easing, fn ){
  4:　if (type > 8) // エラー対処
  5:　　(function(){
  6:　　　alert("第 1 引数は 0〜8 だけが指定できます。\nやり直してください。
  　　　　\n"+"slideToggleEx( 0〜8, 継続時間, easing関数, アニメ後実行関数 )"); return;
  7:　　})();
　　　// 変数設定、初期値複写
  8:　var $target = this, o = $.extend({},$.fn.slideToggleEx.opts);
　　　// 9 〜 23 行は、o オブジェクトにtargetとプロパティがない場合、
　　　 * またはターゲットが異なった場合、つまり初めてそのインスタンスから呼ばれたか、
　　　 * インスタンスが変わった場合に起動される。
　　　 * このブロックはアニメ対象に対して様々な初期化を行う。
　　　 */
  9:　if(!o.target || o.target[0]!==$target[0]) {
 10:　　$.extend(o,{
 11:　　　orig : o, // 当面使わないが念のために o をバックアップ
 12:　　　target : $target,
 13:　　　el : $target[0], // アニメ対象ノードへの参照を取得
 14:　　　type : type,
 15:　　　initstate : !$target.is(":hidden"), // アニメ前の状態が隠蔽か表示か
 16:　　　cnt : 1 // インスタンス毎の起動回数カウンター
 17:　　});
　　　　// アニメ対象が切り替わり、再びあるインスタンスに slideToggleEx メソッドが
　　　　// 適用された時には、最初に呼び出された時の設定を再利用できるように data
　　　　// メソッドを活用してコード進行の効率化を図る。
　　　　// また o オブジェクトにアニメ対象要素等のサイズに係るプロパティを追加する。
 18:　　$.extend(o, $.data(o.el,"initdone") || getSize());
　　　　// アニメ対象ノードの固有 style 値を取得する。
 19:　　for (var p in o.cssdefault.H) o.cssOrig.H[p] = $.css(o.el,p,true);
 20:　　for (var p in o.cssdefault.W) o.cssOrig.W[p] = $.css(o.el,p,true);
　　　　// 上のメソッドでは単位が付かないので付与する。
 21:　　o.cssOrig.H.height +="px"; o.cssOrig.W.width +="px";
 　　   // o オブジェクトを $.fn.slideToggleEx.opts オブジェクトに併合する。
 22:　　$.extend($.fn.slideToggleEx.opts,o);
 23:　}
　　　/* 24 〜 36 行迄のブロックは、slideToggleEx が呼び出される度に
　　　 * 作用する。27 行で type 値をチェックするのは、同一要素における異なる type 値
　　　 * によるslideToggleEx メソッドの連続起動の場合に対処するためである。
　　　 * slideToggleEx メソッドの連続起動の場合には、呼び出される度に o.duration、
　　　 * o.easing、o.complete が変化する可能性があるので、これらも呼び出し毎に
　　　 * 定義する必要がある。
　　　 */
　　　// window サイズが変更された時には親要素サイズを計測し直す。
 24:　window.onresize = getParentWH;
 25:　o.cnt = $.fn.slideToggleEx.opts.cnt++; // カウンター値を 1 増する。
 26:　o.odd = o.cnt % 2; // o.cnt が奇数か偶数かを判定する
 27:　o.type = o.type!==type ? type : o.type;
　　　// duration などの初期値は $.fn.slideToggleEx.opts に用意しておく。
 28:　o.duration = duration || o.duration;
 29:　o.easing = typeof duration !=="object" ? (easing || o.easing) : "";
 30:　o.complete = typeof duration !=="object" ? ($.isFunction(fn) && fn || o.complete) : "";
 31:
　　　/* アニメ対象ノードに AdjustN（ N は type 値 ）名で
　　　 * 関連づけられたオブジェクトがなければ、adjustcssAnim 関数を呼び出し、
　　　 * その返値を o.cssAdjust.show 及び .hide プロパティに代入する。
　　　 * 関連づけられたオブジェクトがあればそのまま利用する。
　　　 * ここに o.cssAdjust は animate メソッドで利用するアニメ用 CSS プロパティの内、
　　　 * 起終点位置に応じて変化する top 及び lef 値だけを保持するオブジェクトである。
　　　 * show 及び hide プロパティには "+=" などの relative アニメーション値が設定される。
　　　 */
 32:　o.cssAdjust = $.data(o.el,"Adjust"+o.type) ||
 33:　　$.data(o.el,"Adjust" + o.type, {show:adjustcssAnim(true), hide:adjustcssAnim(false)});
　　　/* アニメ対象ノードに AnimN（ N は type 値 ）名で関連づけられた
　　　 * オブジェクトがなければ、setAnimCSS 関数を呼び出してその返値を o.cssAnim
　　　 * オブジェクトに代入する。関連づけられたオブジェクトがあればそのまま利用する。
　　　 * ここに cssAnim は animate メソッドで利用するアニメ対象プロパティの全てを
　　　 * 保持するオブジェクトであり、29 行で取得した top値と left値も併合する。
　　　 */
 34:　o.cssAnim = $.data(o.el,"Anim" + o.type) || $.data(o.el,"Anim" + o.type, setcssAnim());
　　　/* アニメ対象ノードに BeforeN（ N は type 値 ）名で関連づけられた
　　　 * オブジェクトがなければ、makecssBefore 関数を呼び出してその返値を o.cssBefore
　　　 * オブジェクトに代入する。関連づけられたオブジェクトがあればそのまま利用する。
　　　 * ここに cssBefore は animate メソッド起動直前のアニメ対象要素のスタイル属性値を
　　　 * 取得し、あるいは設定するためのオブジェクトである。
　　　 */
 35:　o.cssBefore = $.data(o.el,"Before" + o.type) || $.data(o.el,"Before" + o.type, makecssBefore());
　　　// 当該のアニメ対象要素に初めて、あるいは別のアニメ対象操作後に再び
　　　// slideToggleEx メソッドを適用した時に、最初に起動された場合にのみ適用するコード。
　　　// 対象要素の表示状態に応じて、animate メソッド適用前の CSS 値を設定する。
 36:　if (o.cnt==1) $target.css( o.initstate ? o.cssBefore.show : o.cssBefore.hide );
 37:
　　　/* アニメーション起動
　　　 * 第 2 引数がオブジェクトではない時
　　　 * 要素の animate メソッド適用前の表示状態と slideToggleEx メソッドの起動
　　　 * 回数に応じて、当該メソッド第一引数である CSS オブジェクトを選択的に適用する。
　　　 */
 38:　if (typeof o.duration !=="object")
 39:　　return this.animate( (o.initstate && !o.odd || !o.initstate && o.odd)
 40:　　　? o.cssAnim.show : o.cssAnim.hide, o.duration, o.easing, o.complete );
　　　// 第 2 引数がオブジェクトの時
　　　// 要素の animate メソッド適用前の表示状態と slideToggleEx メソッドの起動
　　　// 回数に応じて、当該メソッド第一引数である CSS オブジェクトを選択的に適用する。
 41:　else
 42:　　return this.animate( (o.initstate && !o.odd || !o.initstate && o.odd)
 43:　　　? o.cssAnim.show : o.cssAnim.hide, o.duration ); // アニメ起動
 44:// 以下は以上迄のコードから呼び出される関数群である。
　　　/* getSize はアニメ対象ノードの position 指定を行い、サイズを測る関数。
　　　 * この関数は或る要素に対して slideToggleEx メソッドを適用した初回だけにたった1 回
　　　 * だけ起動される。 54 行と 35 行の data メソッドによって data 関連づけを行わっている
　　　 * ので、同じ要素に対する 2 度目以降の呼び出し時には、たとえ非連続的に呼び出された
　　　 * としても、この関数は呼び出されない。
　　　 */
 45:　function getSize(){
　　　　// position 指定を relative に
 46:　　if ($target.css("position") ==="static") $target.css({position:"relative"});
 47:　　var obj={}, parent={};
 48:　　return obj= {
　 　　   // 親要素の幅と高さを取得
 49:　　　parent : {W:getParentWH().W, H:getParentWH().H},
　 　　   // アニメ対象要素のマージン辺までの高さ（算出スタイル値）取得
 50:　　　oH : parseInt($.css(o.el,"height",true,"margin")),
　 　　   // アニメ対象要素のマージン辺までの幅（算出スタイル値）取得
 51:　　　oW : parseInt($.css(o.el,"width",true,"margin")),
　 　　   // アニメ対象要素のボーダー辺までの高さ（算出スタイル値）取得
 52:　　　oHb : parseInt($.css(o.el,"height",true,"border")),
　 　　   // アニメ対象要素のボーダー辺までの幅（算出スタイル値）取得
 53:　　　oWb : parseInt($.css(o.el,"width",true,"border"))
 54:　　};
 55:　}
 56:　function getParentWH(){ // アニメ対象の親要素のサイズを計測取得する関数
 57:　　var parent = $target.parent();
 58:　　return o.parent={W:parent().width(),H:parent().height()};
 59:　}
　　　// アニメーション起終点に応じたアニメ用 top/left 値設定関数
 60:　function adjustcssAnim(showhide){
 61:　　var plmn = showhide ? "-=" : "+=";
 62:　　return o.type==0 ? {top:plmn + o.oH/2 +"px", left:plmn + o.oW/2 +"px"} : // center
 63:　　　o.type==1 ? {} : // 左上端。top も left もアニメ対象プロパティとしない。
 64:　　　o.type==2 ? {left:plmn + o.oW +"px"} : // 右上端
 65:　　　o.type==3 ? {top:plmn + o.oH +"px", left:plmn + o.oW +"px"} : // 右下端
 66:　　　o.type==4 ? {top:plmn + o.oH +"px"} : 3aspan class="aquamarine"
 
 67:　　　o.type==5 ? {} : // 上辺。top も left もアニメ対象プロパティとしない。
 68:　　　o.type==6 ? {left:plmn + o.oW +"px"} : // 右辺
 69:　　　o.type==7 ? {top:plmn + o.oH +"px"} : // 下辺
 70:　　　{} ; // 左辺。top も left もアニメ対象プロパティとしない。
 71:　}
　　　/* アニメ用プロパティを作成する関数
　　　 * o.cssdefault を基にして横方向/縦方向のプロパティを作成し、またその有無を
　　　 * type 値毎に変化させる。
　　　 * 例えば、type 値が 5 の場合、横方向のプロパティはアニメ対象とはしない。
　　　 * また、margin は auto が指定されている場合にはアニメ用プロパティとせず、
　　　 * その他の場合には他のプロパティと同様に"toggle"とする。
　　　 * 79 行で横/縦方向のプロパティを合体させ、不透明度もアニメ用プロパティと
　　　 * して追加する。
　　　 * 最後に 80〜82 行において、それまでに作ったアニメ用 CSS オブジェクトに
　　　 * アニメーション起終点に応じて変化する top と left プロパティを追加する。
　　　 */
 72:　function setcssAnim(){
 73:　　var obj = {};
 74:　　obj.W = (o.type!=5 && o.type!=7) ? $.extend({}, o.cssdefault.W,
 75:　　　　(o.oW!==o.oWb) ? {marginLeft:"toggle",marginRight:"toggle"} : {}) : {};
 76:　　obj.H = (o.type!=6 && o.type!=8) ? $.extend({}, o.cssdefault.H,
 77:　　　　(o.oH!==o.oHb) ? {marginTop:"toggle",marginBottom:"toggle"} : {}) : {};
 78:　　obj = $.extend({}, obj.W, obj.H, {opacity :"toggle"});
 79:　　return o.cssAnim = {
 80:　　　show:$.extend({},obj,o.cssAdjust.show),hide:$.extend({},obj,o.cssAdjust.hide)
 81:　　};
 82:　}
　　　// animate メソッド適用前の適用対象要素の CSS 値を作成する関数
 83:　function makecssBefore(){
 84:　　var obj = {}, ret = {};
　　　　/* margin をアニメ対象にした場合において、margin 値が "auto" の時には、
　　　　 * jquery.js の各種メソッドでサイズを測定しても margin 値が捕捉できない。
　　　　 * その結果アニメーションは予期せぬ動きをしてしまうため、まず、margin 値を
　　　　 * 強制的にゼロにし、替わりに auto 指定によって確保された margin 値に相当する
　　　　 * left 値と top 値に置き換える。これにより予期したとおりのアニメーションを
　　　　 * 引き起こさせる。
　　　　 */
 85:　　// if marginLeft/Top == "auto", fix marginLeft/Top.
 86:　　obj.W = (o.el.style && $.attr(o.el.style,"margin-left")==="auto") ?
 87:　　　{left : (o.parent.W - o.oWb)/2 +"px", marginLeft : "0px", marginRight : "0px"} :
　　　　　/* この場合も、margin 値は $.css メソッドを使って取得しないと駄目。
　　　　　 * 例えば margin 指定が簡略的に margin: 10px のように行われている場合には、
　　　　　 * jquery.js は margin-left、margin-right などの個々の margin 値を取得しない。
　　　　　 */
 88:　　　{left :"0px",
 89:　　　　marginLeft:$.css(o.el,"margin-left",true), marginRight:$.css(o.el,"margin-right",true)};
 90:　　obj.H = (o.el.style && $.attr(o.el.style,"margin-top")==="auto") ?
 91:　　　{top : (o.parent.H - o.oHb)/2 +"px",marginTop : "0px", marginBottom : "0px"}:
 92:　　　{top : "0px",
 93:　　　　marginTop:$.css(o.el,"margin-top",true), marginBottom:$.css(o.el,"margin-bottom",true)};
　　　　// ここ迄の処理結果を show プロパティに格納する。
　　　　// このプロパティがアニメ対象が表示されている時のアニメ前 CSS 値となる。
 94:　　ret.show = $.extend({}, o.cssOrig.H, o.cssOrig.W, obj.W, obj.H);
　　　　/* 以下はアニメ対象が隠蔽されている場合の処理
　　　　 * アニメ用CSSオブジェクトの hide オブジェクトに top プロパティが存在している
　　　　 * 場合にのみ適用する。
　　　　 * top プロパティが存在していない場合には、top プロパティはアニメ対象としない。
　　　　 */
 95:　　if (o.cssAdjust.hide.top) // アニメ用 CSS オブジェクト作成関数を利用して
　　　　　// アニメ前 CSS オブジェクトを作成する。
 96:　　　obj.top = new Number(parseInt(obj.H.top))
 97:　　　　+ new Number(parseInt(o.cssAdjust.hide.top.slice(2)))+"px";
　　　　// アニメ用CSSオブジェクトの hide オブジェクトに left プロパティ
　　　　// が存在している場合にのみ適用する。
　　　　// left プロパティが存在していない場合には、left プロパティはアニメ対象としない。
 98:　　if (o.cssAdjust.hide.left) // アニメ用 CSS オブジェクト作成関数を利用
　　　　　// してアニメ前 CSS オブジェクトを作成する。
 99:　　　obj.left = new Number(parseInt(obj.W.left))
100:　　　　+ new Number(parseInt(o.cssAdjust.hide.left.slice(2)))+"px";
　　　　// ここ迄の処理結果を hide プロパティに格納する。
　　　　// このプロパティがアニメ対象が隠蔽されている時のアニメ前 CSS オブジェクトとなる。
101:　　ret.hide = $.extend({}, ret.show, obj);
　　　　// data メソッドによる関連づけを行ってから ret オブジェクトを返す。
102:　　return ret;
103:　}
104:} // End of $.fn.slideToggleEx
105:
106:// default 値設定と記憶用プロパティとしての機能のために
107:$.fn.slideToggleEx.opts = {
　　　// 既定値としての引数設定
108:　duration : 1000, easing : null, complete : function(){},
　　　/* auto 指定への対応が必要な margin、及び type 値に応じて変化させる
　　　 * 必要のある top と left ───これらを除くアニメ対象プロパティリスト。
　　　 * 羅列されているプロパティは、最小値の 0 又は 1 (width と height のみ)と
　　　 * 要素固有のプロパティ値との間でアニメーションさせることになる。
　　　 * 高さ方向と横方向とを区別するのは、type 値に応じてアニメ対象プロ
　　　 * パティの要/不要が変化するためである。
　　　 */
109:　cssdefault : {
110:　　H : {
111:　　　height:"toggle",paddingTop:"toggle",paddingBottom:"toggle",
112:　　　borderTopWidth:"toggle",borderBottomWidth:"toggle"
113:　　},
114:　　W : {
115:　　　width:"toggle",　paddingLeft:"toggle",paddingRight:"toggle",
116:　　　borderLeftWidth:"toggle",borderRightWidth:"toggle"
117:　　}
118:　},
119:　cssAdjust : {},
120:　cssOrig : {H:{},W:{}},
121:　cssBefore : {}
122:};
123:})(jQuery);

▲ToTop

slideToggleEx Javascript コード解説

直上に掲載したコードに至るまで、実は多くのバージョンを作成し、失敗しては作り直す「らせん的」過程を何度も繰り返しました。しかし、その苦労話の前に、まずコード作成の基本的方針を述べておくべきでしょう。

slideToggleEx が想定しているシーン
  1. slideToggleEx アニメ対象ノードは表示されていても隠蔽されていても、いずれの状態でも良い。
  2. 1 つの homepage や blog エントリイ内に、複数の slideToggleEx アニメ対象ノードが存在し、それぞれのアニメ起終点は、各々同一でも良いし、異なっても良い。
  3. 1 つのアニメ対象ノードに対して連続して slideToggleEx メソッドを起動することもあり、その場合にはアニメ起終点がその都度変わることもあり得る。
  4. 独自仕様の多い IE においても起動出来るアニメーションとする。
slideToggleEx コードの効率化
  1. slideToggleEx メソッドを同一ノードに適用する場合には、コード進行過程を出来る限り繰り返さないようにする。そのために jQuery.data クラスメソッドを活用してアニメ対象ノードに情報を関連づける。
  2. 一度計算した値や使用した関数は、結果を出来る限り再利用する。そのために、jQery プロトタイプオブジェクトのプロパティを活用する。

▲ToTop

コード作成上の苦労話・強調したい点

1. メソッド終了後にも情報を保持させる措置

まず苦労したのは、slideToggleEx プラグインの再起動の際に、従前値を保持させる措置でした。

無名関数のトップレベルで、slideToggleEx メソッド外に変数を用意すれば解決することなのですが、是が非でもプラグインのメソッド外に変数を置かないでまとめたかったので、拘ってコードを作りました。その結果、メソッド外となる点では変わらないのですが、『Javascript 第 5 版』p.144 や cycle プラグインを参考にして slideToggleEx メソッドのプロパティに値を保持させることにしました。

メソッド実行が終わるとその中で定義された変数は消失してしまうので、当該メソッドの起動回数を記憶させる変数は当該メソッド外になければなりません。しかし外に変数を置くのは美しくありません。

そこでメソッドのプロパティを記憶装置にすることにしました。コードの 107 行から 122 行がその記憶装置です。

2. アニメーション開始前の対象ノードの CSS 値の処理

要素が隠蔽されていても表示されていても、要素固有の margin、border、padding、width、height 値などは保持されています。隠蔽されていてもそのスタイル諸値がゼロになるわけではありません。そのことをまず把握し理解する必要があります。（ 実は私はこのことへの理解が不十分でした。 ）

次に、slideToggleEx メソッドの適用対象が複数存在しているエントリイにおいて、アニメ起動が異なる要素に対してアト・ランダムに行われる場合、それぞれの要素に対して適切なアニメを起こさせることがかなり難しいことでした。

以前、slideToggleEx メソッド対象となった要素は偶々隠蔽されているかもしれないし、表示されているかもしれません。今 slideToggleEx アニメを引き起こした要素も表示されているかもしれないし、隠れているかもしれません。このようなアト・ランダムな状態においても、それぞれの要素毎に適切な slideToggleEx アニメーションが引き起こされるようにしなければなりません。

以上を踏まえた処理として cssBefore オブジェクトを用意しました（32 〜 33 行）。このオブジェクトによりアニメーション起動前の要素のプロパティを事前に設定するわけです。これにより隠蔽状態から表示へとアニメートする要素が、適切な位置で表示されるようになりました。

3. margin 値の扱い

margin 値は一般に 「 margin:1em auto 」 などのように簡略的に指定されている場合が多いでしょう。

ところがこのような指定の場合には、jquery.js の css メソッド等を活用しても margin-left 等の個々の margin 値を取得することが出来ません。特に auto 指定がされている場合、margin をアニメプロパティに指定すると全く予想外のアニメーションが引き起こされてしまいます。jquery.js は auto 指定された margin 値を数値的に捉えることが出来ないので、margin-left、margin-right 等のプロパティをゼロと判読してしまうためです。

こうして、margin 値が様々な様式で指定されている場合でも、それを適切な数値として把握する必要が生じます。

そのための処理は makecssBefore 関数で行わせました。

▲ToTop

4. アニメ開始前における対象要素の CSS 値設定

animate メソッドは、アニメ開始前の要素の様々な属性値（スタイル属性値を含む。width、margin etc.）をアニメ開始値として採用します。（もし或るプロパティの属性値がない場合には開始値を 0 とします。）このため表示されている要素にアニメーションを適用する場合には、一般的にはアニメ前 CSS 値を設定する必要はありません。

例えばアニメ対象要素に width="380px" が設定されていれば、ブラウザがその値を解釈して、380px 幅の要素を表示しているわけです。この場合 width プロパティのアニメ開始値が何も指定されていなければ、 animate メソッドは要素固有値である 380px を width プロパティのアニメ開始値とします。

ところが隠蔽されている要素にアニメーションを適用する場合には様相が異なってきます。

隠蔽されている要素を表示するアニメーションの場合でも、その隠蔽が一般的にそうであるように display = "none" 指定によって行われている場合には、対象要素の固有の属性値は存在し続けます。要素が単に非表示になっているだけで、display = "none" 以外の属性値は表示されていた時の値が保持され続けます。

この状態に対して隠蔽要素を表示させる animate メソッドを適用すると、animate メソッドの仕様上、要素固有値がアニメ開始値になるのですから、アニメプロパティが要素固有値となってしまいます。この結果、0 からスタートさせたかったアニメーションは引き起こされません。

従って、隠蔽要素を表示させるアニメーションの場合、アニメ開始値を animate メソッド起動前に強制的に指定する必要があります。こうして強制的に CSS 値を指定するための cssBefore オブジェクトが必要・不可欠となります。

さて、その cssBefore はアニメーションの初期値を定めるわけですから、アニメーションの態様に応じて（ つまり起終点位置に応じて ）変化します。ボックス要素の左上、上辺、左辺などを起終点とするアニメーションの場合には問題になりませんが、例えば、アニメが要素の中心位置から始まる場合には、top と left の開始値をボックス内容辺、ボーダー辺あるいは margin 辺までの、幅や高さの半分の値に設定する必要があります。また、開始点がボックスの右上の場合には、left の開始値をボックス内容辺、ボーダー辺あるいは margin 辺までの幅に設定する必要があります。

以上に述べた隠蔽状態における cssBefore オブジェクトの作成を makecssBefore 関数の後半で行っています。

なお、アニメプロパティ値を toggle や show に指定すると、animate メソッドは要素の固有属性値をアニメの終了値として利用します。この利便性故に、アニメプロパティ値に toggle を多用することになります。

▲ToTop

5. $.data メソッドの活用

slideToggleEx プラグインでは以下の 4 箇所で $.data メソッドを利用しました。

  1. 18 行 …… $.extend(o, $.data(o.el,"initdone") || getSize());
  2. 32〜33 行 ……o.cssAdjust = $.data(o.el,"Adjust"+o.type) || 　　　$.data(o.el,"Adjust" + o.type, $.data(o.el,"Adjust" + o.type, adjustcssAnim(false));
  3. 34 行 …… o.cssAnim = $.data(o.el,"Anim" + o.type, $.data(o.el,"Anim" + o.type, setcssAnim());
  4. 35 行 …… o.cssBefore = $.data(o.el,"Before" + o.type) || $.data(o.el,"Before" + o.type, makecssBefore());

このメソッド利用した目的は、ずばりコード進行の効率化/高速化です。このメソッドを使うことにより、不必要に同じ計算を繰り返させたくなかったのです。

上の 4 例は皆同様な形式を取っているので、どれか 1 つ分かれば他は推して知るべしです。なので、ここでは一番最後の 35 行で使った $.data メソッドについて触れておきます。

$.data(o.el,"Before" + o.type) は、アニメ対象要素 o.el に "BeforeN" （ N は type 値 ）と言う名称で関連づけられたオブジェクトがある場合には、そのオブジェクト（ cssBefore オブジェクト）を返し、それが左辺の o.cssBefore に代入されます。一方、関連づけられた情報がなければ false を返すので、次にある || 演算子が働きます。

|| 演算子が作用すると、オペランドである makecssBefore 関数が実行されます。

この関数では最後の行に $.data メソッドがあるので、関数によって算出したオブジェクトを、このメソッドによりアニメ対象要素 o.el に "BeforeN" 名で関連づけます。関連づけられたオブジェクトは return により左辺の o.cssBefore オブジェクトに返されます。

こうして、同一要素に対する同一 type の slideToggleEx メソッド起動時には───実際、表示/隠蔽はセットで履行されるはずだから、多くの場合 slideToggleEx メソッドは、同一要素に対して同一 type 値で繰り返し実行されます。───最初の呼び出し時にだけ makecssBefore 関数が実行され、二度目以降は固有の名称で要素に関連づけられているオブジェクト値が利用されて、 makecssBefore 関数は実行されません。これがコード進行の「最初の」「効率化」であり「高速化」です。

$.data メソッドを利用したことによる効率化は、これだけではありません。或る要素Ａが slideToggleEx によって表示/隠蔽され、次に別の要素Ｂがやはり slideToggleEx で表示/隠蔽されたと仮定します。この後に再び要素Ａに slideToggleEx メソッドを適用した場合に、更なる効率化・高速化が発揮されます。

既に $.data メソッドによるＡ、Ｂ各々の要素へのオブジェクトの関連づけは済んでいますから、要素Ｂに続けてＡに slideToggleEx アニメを適用した時には、既にＡに関連づけられているオブジェクトが利用され、makecssBefore 関数は起動されません。こうして無駄なコード進行が排除されます。

以上のことが 4 つの関数に対して行われるので、現在操作対象となっている頁がリロードされない限り、slideToggleEx アニメーションが一度適用された要素においては、 slideToggleEx 内にある様々な関数を殆ど実行する必要がなくなります。こうしてコード進行が大いに高速化されます。高速化は言い換えれば省エネでもあるので、流行の言葉を使えば「エコ」なコード進行が行われると言っても良いかもしれません。

▲ToTop

クリックイベント登録と slideToggleEx メソッド適用対象の簡便な登録コード

さて、slideToggleEx を使うシーンは、ボタンをクリックして或るコンテンツを表示したり隠蔽する場合が多いと思われます。そうだとすれば、その一連の操作（ クリックイベントの登録・或るコンテンツの指定・slideToggleEx メソッドの要素への適用 ）をコード化して半自動化してしまえば、大変楽になります。

次に述べるコードは、この一連の操作、つまりボタンへのクリックイベント登録と、クリック時の slideToggleEx メソッド適用対象の特定とそのメソッドの起動をまとめて行うものです。

具体的には 「 或るボタンがクリックされたら、slideToggleEx アニメーションが適用される或る要素が特定され、slideToggleEx メソッドが起動する 」 そのような Javascript コードです。

そのコードでは、同一ページ内に存在する、複数の同一又は異なる type の slideToggleEx アニメーションの、トリガーボタンとアニメ対象を一括して登録します。slideToggleEx の引数であるアニメ継続時間、easing 関数及びアニメ終了後の実行関数は、コードの冒頭で登録し、これを slideToggleEx メソッドに渡すようにしています。

そもそもコード作成当初では、slideToggleEx メソッドの引数を何とか HTML 文内で行いたいと考えました。クラス指定によって、アニメの起終点 （ type ） を指定するだけではなくその他の引数もまとめて指定したいと思いました。

しかし、クラス名文字列の中に、duration、easing などの文字をその都度組み込むと、冗長なクラス名指定となってしまい、いかにも面倒ですし、値だけを羅列するようにしても煩雑で順番を含めてわかりにくくなります。それにボタンクリックによる要素の表示/隠蔽操作において、その都度 duration や easing の値を変化させる必要性が高いとは思えません。

以上から、クラス名の中に slideToggleEx メソッドの引数を盛り込むことはやめました。

なお、ここにおける duration 等の指定は、ここで対象としている「 ボタンクリックによって起動される slideToggleEx 起動方法 」 において、slideToggleEx メソッドの引数を指定するものです。他方、slideToggleEx プラグインコードにおける $.fn.slideToggleEx.opts オブジェクト内でも duration 等を指定していますが、これは slideToggleEx メソッドの一般的な既定値を設定するものです。

下のボタンをクリックすると隠蔽状態にあるそのコードが、右下から展開され、再びボタンをクリックすると右下に隠れます。（type 3）

▼このコードは、メソッドプラグインではありませんが、プラグインとセットで include
　ファイルに登録しておくと重宝します。これがないと fireSlideToggleEx-n のクラス指定を
　しても next sibling 要素などを slideToggleEx の適用対象とすることは出来ません。

// button 要素へのクリックイベント登録及び slideToggleEx メソッド適用対象のピックアップ
// クリックイベント起動ボタンと slideToggleEx 適用対象を登録する。
124:// regist click Event to fire slideToggleEx() for nextBlock
125:$(function(){ // 当然 DOM が Ready されてから起動する必要があります。
　　　// 初期値設定
126:　var duration = 1000, easing = null, complete = function(){}, clk = {};
127:　function func(j){
128:　　$.each(clk[j],function(i){
　  　　// target オブジェクトは slideToggleEx 対象の個々のノード 1 つだけを格納する。
129:　　　var $target={};
　　　 　// $target オブジェクトの j プロパティに slideToggleEx 対象ノードを格納する。
　　　 　// fireSlideToggleEx-x クラス指定されたボタン要素がブロック要素の場合には
　　　 　// next siblingを block 以外の inline 要素の場合には親要素の
　　　 　// next sibling 要素を slideToggleEx 対象とする。
130:　　　$target[i] = $(this).css("display")=="block" ? $(this).next() : $(this).parent().next();
131:　　　if ($target[i].length) {
132:　　　　$(this).click(function(){
　　　　　　　// slideToggleEx を起動する。
133:　　　　　$target[i].slideToggleEx(j, duration, easing, fn);
134:　　　　　$(this).blur(); // ボタン要素のフォーカスを外す
135:　　　　});
136:　　　}
137:　　});
138:　}
139:　for (var j=0; j<9; j++){ // 0 から 8 迄の巡回処理
　　　　// クリックイベントを登録するオブジェクト clk の i プロパティを作成し、
　　　　// それに "fireSlideToggleEx-i"（ i は 0〜8 ） class 名のノードをもつ
　  　　// jQuery インスタンスを登録する。これにより、ページ内にある
　　 　 // fireSlideToggleEx-n クラス名を持つノードを捉える。
140:　　clk[j] = $(".fireSlideToggleEx-" + j);
141:　  　if (!clk[j].length) continue;
　　　　// i 番名のノードがなければ loop の先頭行に戻って i++ する。
142:　　func(j);
143:　　clk[j].hover( // マウスオーバー/アウト時のボタン背景色の変更
144:　　　function(){$(this).css({backgroundColor:"pink"})},
145:　　　function(){$(this).css({backgroundColor:""})}
146:　　)
　　　　// マウスが押し下げられた場合の色替え
147:　　.mousedown(function(){$(this).css('background-color','palegreen')})
148:　}
149:});
150:});

▲ToTop

FC2ブックマークに追加

クロージャーに関するメモ

ユニークカウンター・クロージャー

よく見かけるクロージャーの例として次のカウンターがあります。

■ カウンタークロージャー
var counter = (function(){
    var id = 0;
    return function(){ return id++}
})();

// この counter 関数を次のように実行すると、その都度異なる値が返されるので、
// ユニークカウンターとして使うことが出来ます。
/* 1 度目 */  counter(); // 返値は 0
/* 2 度目 */  counter(); // 返値は 1
・・・・

このカウンタークロージャーは、外からカウンター値を弄れないため、まさにユニークな「変えられない」カウンターとして使えることから、一部では推奨されています。（『Javascript 第 5 版』等）

確かに、この counter 関数を任意のコードに組み込んでその中でカウンターとして使えば、任意のコードが呼び出された回数を確実に測定することが出来ます。（但し、そのコードを再読み込みすればゼロに戻ってしまいますが・・・）

奇数/偶数を記録するクロージャー

上を踏まえて、奇数 / 偶数をトグルで返すクロージャーを作ってみました。

■ 奇数/偶数トグルクロージャー
var state = (function(){
    var odd = 1;
    return function(){ return odd++ % 2 == 1 ? true : false }
})()

この state 関数を次のように実行すると交互に true / false が返されます。
/* 1 度目 */  state(); // 返値は true
/* 2 度目 */  state(); // 返値は false
/* 3 度目 */  state(); // 返値は true
/* 4 度目 */  state(); // 返値は false
・・・・

ここに false を偶数、true を奇数と読み替えれば、state 関数は交互に偶数と奇数を返すものとなります。しかも、その値を外から操作することは出来ません。

これをコード内で利用すれば、例えば起動回数が奇数回か偶数回かを返して、場合分けを行うことが出来ます。

▲ToTop

これらは何故クロージャーなのか？

さて、以上の 2 つのクロージャーから、何故これらが単なる関数ではなく「クロージャー」と言われるのか、その所以を学習しようと思います。

これらの 2 つの関数に共通することは、入れ子になった関数がグローバル変数に返されていることです。そのため、外側の関数の実行が終了しても、入れ子になったそれぞれの関数に対するグローバルスコープからの参照が生き続けます。

こうしてグローバル環境から、いつでも入れ子になった関数にアクセスできることになります。

なお、関数がリテラル表記されていることは本質には何ら関係ありません。次のように書いてもクロージャーであることに何ら替わりはなく、同一の挙動をするからです。リテラル表記の方が簡潔に同一のことを表現できるに過ぎません。

function state (){
    var odd = 1;
    return function(){ return odd++ % 2 == 1 ? true : false }
}
var log = state();
/* 1 度目 */  log() // result：true
/* 2 度目 */  log() // result：false
/* 3 度目 */  log() // result：true
/* 4 度目 */  log() // result：false
・・・・
クロージャーはどこにある？

ここで、まずはっきりさせなければならないことは、「 クロージャー 」と言われる部分はどこなのか、ということです。恥ずかしながら、counter 関数や state 関数がクロージャーなのか、それとも入れ子になった関数がそれなのか、しばらく理解しないまま時が経過してしまったので、ここで明らかにしたいのです。

実は、改めて Javascript 第 5 版を読み直し、また非常に分かりやすいサイト クロージャと高階関数 をじっくり読んで、やっと理解出来たのは、つい最近のことなのです。

「 クロージャーとは、その関数が定義された環境への参照を持った関数のこと 」───上記サイト『クロージャと高階関数』のこの定義が曇った頭をすっきりさせてくれました。またよくよく読み返してみると、Javascript 第 5 版 において 「 クロージャーとしての入れ子型の関数 」（p.142）と表現されているではありませんか！

つまりクロージャーは外側の関数ではなく、その中にある入れ子になった関数です。「入れ子になった関数を定義した環境」とは、外側の関数の変数とその有効範囲（スコープ）を意味するわけで、上の 2 つの例では共に、入れ子になった関数が定義された環境とは、グローバル環境下にある関数の中に存在するローカル環境です。

クロージャーは、どんな場合に 「 生き続けるか？ 」 （つまり、グローバル環境から参照できるか？）

さて、入れ子になった関数はよく使われますし、その関数が外側の関数環境への参照をもっていることも決して少なくありません。例えば、次のように外側の関数の引数や内部の変数を、内側の関数から参照するようなコードを書けば、内側の関数は 「 定義された環境への参照を持った関数 」 になります。つまり内側の関数はクロージャーです。

// 関数 sample はグローバル環境にある。
function sample(x){ // グローバル関数 sample 直下に、環境 Lc1 が格納されている。
　　var y = 1; // 環境 Lc1 には x、y、z の 3 つの変数がある。
　　// 環境 Lc2 から環境 Lc1 の中にある x と y を参照している。
　　var z = function(){ return y + x++; /*環境 Lc2*/};
　　return z();
};
/* 1 度目 */  sample(2) // result：3
/* 2 度目 */  sample(2) // result：3
/* 3 度目 */  sample(2) // result：3
・・・・

しかし、いくらクロージャーがあっても、それだけではグローバル環境から内側の関数は参照出来ません。

上の例では、確かに内側の関数から外側の関数への参照（ 参照 Lc2 → Lc1 ）は存在しますが、グローバル環境から内側の関数への参照（ 参照 G → Lc2 ）が存在しません。 Lc1 への参照を持ったクロージャー（それは Lc2 環境にある）に対して、グローバル環境 G からアクセス出来なれば、外側の関数が終了すればそれと共にクロージャーもガーベージコレクションされてしまいます。

この点こそがポイントです。グローバル環境からクロージャーを参照する何らかの措置（例えば Lc2 環境からの return 値をグローバル環境に返す）を施して、グローバル環境から内側の関数にアクセス出来るようにすれば、外側の関数実行が終わった後においても、グローバル環境からクロージャーへの参照を利用して、結果として Lc1 環境へのアクセスが可能となります。

模式的に書けば、G → Lc2 → Lc1 （ → は左側の環境から右側の環境への参照を表す） となるとき、Lc2 環境の関数がクロージャーになります。

多くのクロージャーサンプルは、内側の関数からの return 連鎖を利用してグローバル変数と内側の関数をリンクさせていますが、グローバル環境からの内部関数への参照を設定することが、クロージャーを効果的に利用する「 秘策 」となります。

FC2ブックマークに追加

jquery.js のアニメーションコードの活用 ( 3 ) slideToggleEx プラグインの簡便な活用のために（不完全版）

このエントリイで言及し掲載した slideToggleEx プラグインは不完全でした。完全版はエントリイ No. 733 をご覧ください。

slideToggleEx プラグインの簡便な活用方法が必要だ

jquery.js の自作プラグイン slideToggleEx を実際に各エントリイ内で随時利用するためには、簡便な利用方法を作っておく必要があります。こうした自らの需要に基づいて以下の方法をまとめました。

用意するもの・ことは以下の 5 つです。
  1. include 用 slideToggleEx プラグインファイルと include タグ要素
  2. slideToggleEx が適用されるタグ要素
  3. 起終点を右側にする場合には、対象タグ要素に width スタイル属性を設定します。また起終点を下にする場合には height スタイル属性を設定します。そうしないと animate メソッドの中で適正な幅や高さが計測されない場合があるためです。
  4. slideToggleEx を呼び出し、適用させるタグ要素（一般的には button タグでしょう）
  5. その button タグのクラス属性に fireSlideToggleEx-n を追加します。（ n は 0 から 8 の整数）

n は起終点を意味し次の通りの意味を持ちます。

0：ボックスの中心、1：左上端、2：右上端、3：右下端、4：左下端、
5：上辺、6：右辺、7：下辺、8：左辺

これだけ設定すれば、トリガーである button をクリックすると、n で指定した位置を起終点として、トリガーボタンの直後に配置された要素が slideToggleEx 適用対象要素となり、隠蔽されたり表示されるようなコード（ エントリイ末尾に掲載 ）を書きました。

「 これだけ 」と言っても結構たくさんあるため、最初は面倒に感じますが、直ぐに慣れますし、実際に使ってみると決して大変な手間ではありません。

必要な HTML 構造

上の 5 つだけで、slideToggleEx プラグインが簡単に使えるようにするために、もう１つ該当部分の HTML 文を特別な構造にする必要があります。これが 6 つ目にして最後の要件となります。その要件とは起動ボタンの直ぐ後に slideToggleEx 対象要素があるということです。

そうでない場合には 個々に slideToggleEx メソッドを呼び出すコードを書くことになります。

該当部分の HTML を以下のいずれかにする必要があります。（いずれのケースもボックスの左上を起終点とする場合で例示します。）

■ケース 1
<div><button class="fireSlideToggleEx-1">起動ボタン</button></div>
<div>・・・slideToggleEx対象要素・・・</div>

■ケース 2
<button class="fireSlideToggleEx-1" style="display:block;width:120px;">起動ボタン</button>
<div>・・・slideToggleEx対象要素・・・</div>

※ 2 行目の div 要素は別に div でなくてもブロック要素ならば何でも構いません。

ケース 1 は一般的な button タグの使い方の場合です。つまり button タグを inline 要素として配置する場合の HTML 文です。この場合には button タグの親要素の next sibling ブロック要素が slideToggleEx メソッドの適用対象となるようにコードを作りました。

一方ケース 2 は button タグをブロック要素として配置する場合です。この場合には当該のボタンタグの next sibling ブロック要素が slideToggleEx メソッドの適用対象となるようにコードを作りました。

このような当然と思われるHTML文構成にしておけば、運用に当たってどのようにしたかを思い出すのも容易ですし、仮に構造を忘れても直感的に思い出すことが可能となります。

▲ToTop

以上の前提で作った slideToggleEx プラグイン活用コード

プラグインは position 無指定版と指定版の 2 種類を作りました。どちらも全く同様の動きをしますが、後者の方がコード全体のバランスがよいかもしれません。

当初 position 指定版を作成し、アニメ適用対象に position:relative をその都度指定していました。top と left をアニメ対象とするので、アニメ対象要素には static 以外の position 指定が為されていなければならないためです。しかし、slideToggleEx プラグインの運用を重ねるに連れ、その都度指定することが非常に面倒であることに気がつきました。

そこで改めて position 無指定版を作成したのですが、それが完成してから、ふと position 指定をコードで行えばよいことに気がつきました。そして、仮にアニメ対象に position 指定がされていない場合でも、相対指定となるよう、Javascript コードによって強制的に指定することにしました。

結果として、回り道をしてしまったのですが、このようなケアレスミスを犯すこと自体が、まだまだコード開発に不慣れである証明かもしれません。

こうして、今実際に使っている slideToggleEx プラグインメソッドは最初に作った版を改訂した position 指定版となりました。

なお、アニメ継続時間と easing 関数は、初期値を設定する slideToggleEx.opts オブジェクトにおいて、1 秒に設定し、easing は無指定としています。opts オブジェクトを変えれば、自在に継続時間と easing 関数を変更できますが、使う際にその都度 duration と easing 関数を変更する必要はないと考え、(1) 指定するボタンタグと (2) 指定されるブロックタグ及び (3) slideToggleEx-n クラス名を指定するだけで使えればよいと判断しました。

以下のコードリストの表示/隠蔽には当然ながら、slideToggleEx を適用しています。

▲ToTop

▼ver not use "position:relative/absolute" 
/* jQuery plugin : slideToggleEx() Release at 2009.8.21, ver2 at 2009.9.8*/
(function($){
var ver="absolute animation, non position assignment";
$.fn.slideToggleEx = function( type, duration, easing, fn ){
　$target=this;
　var o = $.extend({},$.fn.slideToggleEx.opts);
　// 初めてそのインスタンスから呼ばれたか、インスタンスが変わった場合のみ
　if(!o.target || o.target[0]!==$target[0]) {
　　$.extend(o,{
　　　orig : o, // 当面使わないが念のために $.fn.slideToggleEx.opts をバックアップ
　　　target : $target, // jQuery インスタンスへの参照を登録する。
　　　// ボックスを show する時に初期のマージン値を使用するので記録しておく。
　　　initMTL:{marginTop:$target.css("margin-top"),marginLeft:$target.css("margin-left")},
　　　/* ボックスのマージン辺までの外枠サイズをゲットする。
　　　 * 但し、jquery.js の 圧縮ファイルでは outerWidth(true) のように引数を指定しても
　　　 * margin 辺までの外寸を取得しない。そこでやむなく引数を付けずに border 辺までの値を
　　　 * 取得してから、それに margin 値を加算して margin 辺までの外寸を取得する。*/
　　　oH : $target.outerHeight() + parseInt($target.css("margin-top"))
　　　　+ parseInt($target.css("margin-bottom")),
　　　oW : $target.outerWidth() + parseInt($target.css("margin-left"))
　　　　+ parseInt($target.css("margin-right")), 
　　　// プラグイン起動回数が奇数か偶数かを記録するプロパティ
　　　odd : false
　　});
　　
　　/* メモリ上の opts オブジェクトにこの上で作成したばかりの o オブジェクトを統合
　　 * して、初期値として保存する。同じインスタンスに対する 2 度目以降のプラグイン
　　 * 起動時には o オブジェクトに opts オブジェクトが転写され、かつこの if 条件は
　　 * falseとなるので if ブロックは履行されない。こうして効率的なコード進行となる。
　　 * また、2 度目以降のプラグイン起動が異なるインスタンスに対して行われた場合には
　　 * 2 番目の if 条件 o.target[0]!==$target[0] が true となるので、if ブロックが履行される。
　　 * こうして o オブジェクトも $.fn.slideToggleEx.opts オブジェクトも新しい
　　 * インスタンスの諸属性値を格納する。*/
　　$.fn.slideToggleEx.opts = $.extend($.fn.slideToggleEx.opts,o);
　}
　
　/* 奇数回目か偶数回目か、起動回数を記録する。ここでは $.fn.slideToggleEx.opts
　 * オブジェクトを利用して slideToggleEx メソッドの実行が終わった後も
　 * odd 値を残しておくことがポイントである。*/
　o.odd = $.fn.slideToggleEx.opts.odd = !$.fn.slideToggleEx.opts.odd;
　o.hidden = $target.is(":hidden"); // アニメ対象が隠れているかどうか
　o.duration = duration || o.duration; // 第 2 引数か opts プロパティの利用
　// 第 3 引数か opts プロパティの利用。duration がオブジェクトの時には空。
　o.easing = typeof duration !=="object" ? (easing || o.easing) : "";
　// 第 4 引数か opts プロパティの利用。duration がオブジェクトの時には空。
　o.complete = typeof duration !=="object" ? ($.isFunction(fn) && fn || o.complete) : "";

　// アニメ用の CSS オブジェクトを作成する関数
　function makeAnimCSS(type,showhide){
　　type = new Number(type);
　　if (showhide === false) { // 隠蔽されている時のアニメ用 CSS 作成
　　　return type==0 ? {marginTop:o.oH/2+"px", marginLeft:o.oW/2+"px"}:// center
　　　type==1 ? {marginTop:0,marginLeft:0}: // 左上端
　　　type==2 ? {marginTop:0,marginLeft:o.oW + "px"}: // 右上端
　　　type==3 ? {marginTop:o.oH+"px", marginLeft:o.oW+"px"}:// 右下端
　　　type==4 ? {marginTop:o.oH+"px", marginLeft:0}: // 左下端
　　　type==5 ? {marginTop:0}: // 上辺
　　　type==6 ? {marginLeft:o.oW+"px"}:// 右辺
　　　type==7 ? {marginTop: o.oH+"px"}:// 下辺
　　　{marginLeft:0}; // 左辺
　　// 表示されている時のアニメ用 CSS 作成
　　// type 値が 5 と 7 の時にはトップ値のみ、6 と 8 の時にはレフト値のみ
　　// 0 〜 4 の時にはトップ値とレフト値を使用する。
　　} else return (type==5 || type==7) ? {marginTop:o.initMTL.marginTop}
　　　: (type==6 || type==8) ? {marginLeft:o.initMTL.marginLeft} : o.initMTL;
　}

　if (type > 8) // エラー処理
　　(function(){
　　　alert("第 1 引数は 0〜8 だけが指定できます。\nやり直してください。\n"+
　　　"slideToggleEx( 0〜8, 継続時間, easing関数, アニメ後実行関数)"); return;
　　})();
　else { // type 値が 0 〜 8 の時
　　// アニメ用 CSS の最終作成（ margin 以外のプロパティ値からなるオブジェクトに、
　　// makeAnimCSS 関数で作ったオブジェクトを併合する）
　　var obj =$.extend( {}, // margin 以外のプロパティ群
　　 　( type==5 || type==7 ) ? {} : o.animWidth,
　 　　( type==6 || type==8 ) ? {} : o.animHeight,
　　 　{opacity:"toggle"} );
　　/* 偶数回目の起動か、アニメ対象が隠蔽時の起動の時には、makeAnimCSS の
　　 * 第 2 引数を true に、奇数回目の起動か、アニメ対象が表示されている時には、
　　 * makeAnimCSS の第 2 引数を false にする。
　　 * これによりアニメ用 CSS 値を二通りの場合に対応させて作成する。*/
　　$.extend(obj,(!o.odd || o.hidden) 
　　　? makeAnimCSS(type,true) : makeAnimCSS(type,false));
　　return this.animate(obj, o.duration, o.easing,o.complete); // アニメーション起動
　}
} // End of $.fn.slideToggleEx function

/* デフォルト値を slideToggleEx メソッドの opts プロパティに設定しておく。
 * このオブジェクトは slideToggleEx メソッドの実行が終わった後の情報記録装置
 * としても機能する。*/
$.fn.slideToggleEx.opts = {
　duration:1000, easing:null, complete:function(){},
　animHeight : { // 高さに係るアニメ CSS の既定値
　　height:"toggle",marginTop:"toggle",marginBottom:"toggle",paddigTop:"toggle",
　　paddingBottom:"toggle",borderTopWidth:"toggle",borderBottomWidth:"toggle"
　}, animWidth : { // 幅に係るアニメ CSS の既定値
　　width:"toggle",marginLeft:"toggle",marginRight:"toggle",paddigLeft:"toggle",
　　paddingRight:"toggle",borderLeftWidth:"toggle",borderRightWidth:"toggle"
　}
};
})(jQuery);

▲ToTop

▼ver use "position:relative"
// jQuery plugin : slideToggleEx() Release at 2009.8.21, verup 2009.9.9
(function($){
var ver="not absolute but relative animation on position relative";
// top と left プロパティによって起終点を操る position relative バージョン
$.fn.slideToggleEx = function( type, duration, easing, fn ){
　var $target = this;
　var o = $.extend({},$.fn.slideToggleEx.opts);
　// 初めてそのインスタンスから呼ばれたか、インスタンスが変わった場合のみ
　if(!o.target || o.target[0]!==$target[0]) {
　　$.extend(o,{
　　　orig : o,
　　　target : $target,
　　　oH : $target.outerHeight() + parseInt($target.css("margin-top"))
　　　　+ parseInt($target.css("margin-bottom")),
　　　oW : $target.outerWidth() + parseInt($target.css("margin-left"))
　　　　+ parseInt($target.css("margin-right")),
　　　odd : false
　　});
　　$.extend($.fn.slideToggleEx.opts,o);
　　if ($target.css("position") ==="static")
　　　$target.css({position:"relative",top:"0",left:"0"});
　}
　o.odd = $.fn.slideToggleEx.opts.odd = !$.fn.slideToggleEx.opts.odd;
　o.hidden = $target.is(":hidden");
　o.duration = duration || o.duration;
　o.easing = typeof duration !=="object" ? (easing || o.easing) : "";
　o.complete = typeof duration !=="object" ? ($.isFunction(fn) && fn || o.complete) : "";

　function makeAnimCSS(type,showhide){ // アニメCSSプロパティを作成する関数
　　var type = new Number(type);
　　var plmn = showhide ? "-=" : "+="; // showhide == true → "-="
　　return type==0 ? {top: plmn + o.oH/2 +"px", left: plmn + o.oW/2 +"px"} : // center
　　type==1 ? {top: plmn + 0, left: plmn + 0} : // 左上端
　　type==2 ? {top: plmn + 0, left: plmn + o.oW +"px"} : // 右上端
　　type==3 ? {top: plmn + o.oH +"px", left: plmn + o.oW +"px"} : // 右下端
　　type==4 ? {top: plmn + o.oH +"px", left: plmn + 0} : // 左下端
　　type==5 ? {top: plmn + 0, left: plmn + 0} : // 上辺
　　type==6 ? {top: plmn + 0, left: plmn + o.oW +"px"} :// 右辺
　　type==7 ? {top: plmn + o.oH +"px", left: plmn + 0} :// 下辺
　　type==8 ? {top: plmn + 0, left:plmn + 0} : {top:plmn + 0, left:plmn + 0} ;// 左辺
　}

　if (new Number(type) > 8) // エラー対処
　　(function(){
　　　alert("第 1 引数は 0〜8 だけが指定できます。\nやり直してください。\n"+
　　　"slideToggleEx( 0〜8, 継続時間, easing関数 )"); return;
　　})();
　else {
　　var obj = (!o.odd || o.hidden) 
　　　? makeAnimCSS(type,true)  // 偶数回目の起動か、または要素が隠蔽されている時の CSS 作成
　　　: makeAnimCSS(type,false); // 奇数回目の起動か、要素が表示されている時の CSS 作成
　　$.extend( obj, // top と left だけのCSSオブジェクトに幅と高さ関係値も追加
　　 　( type==5 || type==7 ) ? {} : o.animWidth, // 上辺か下辺の時には幅方向CSSは対象外
　 　　( type==6 || type==8 ) ? {} : o.animHeight, // 右辺か左辺の時には高さ方向CSSは対象外
　　 　{opacity:"toggle"} ); // 透明度もアニメ対象プロパティとする
　　return this.animate(obj, o.duration, o.easing, o.complete); // アニメ起動
　}
}; // End of $.fn.slideToggleEx

// 初期値設定とプロパティ記憶装置としての機能のために
// ※ これは position 無指定版と指定版に共通する同一のものです。
$.fn.slideToggleEx.opts = {
　duration:1000, easing:null, complete:function(){},
　animHeight : {
　　height:"toggle",marginTop:"toggle",marginBottom:"toggle",paddigTop:"toggle",
　　paddingBottom:"toggle",borderTopWidth:"toggle",borderBottomWidth:"toggle"
　}, animWidth : {
　　width:"toggle",marginLeft:"toggle",marginRight:"toggle",paddigLeft:"toggle",
　　paddingRight:"toggle",borderLeftWidth:"toggle",borderRightWidth:"toggle"
　}
};
})(jQuery);

▲ToTop

▼このコードは、メソッドプラグインではありませんが、プラグインとセットで include
　ファイルに登録しておくと重宝します。これがないと fireSlideToggleEx-n のクラス指定を
　しても next sibling 要素などを slideToggleEx の適用対象とすることは出来ません。
/* regist click Event to fire slideToggleEx() for nextBlock
 * クリックイベント起動ボタンと slideToggleEx 適用対象を登録する。
 * これも position 無指定版､指定版に共通するコードです。*/
 1:$(function(){ // 当然 DOM が Ready されてから起動する必要があります。
 2:　var duration = 1000, easing = null,fn = function(){}, clk = {};
 3:　function func(i){
 4:　　$.each(clk[i],function(){
 　　　// target オブジェクトは slideToggleEx 対象の個々のノード 1 つだけを格納する。
 5;　　　var $target={};
　　　 　// $target オブジェクトの j プロパティに slideToggleEx 対象ノードを格納する。
　　　 　// fireSlideToggleEx-x クラス指定されたボタン要素がブロック要素の場合には
　　　 　// next siblingを block 以外の inline 要素の場合には親要素の
　　　 　// next sibling 要素を slideToggleEx 対象とする。
 6:　　　$target[i] = $(this).css("display")=="block" ? $(this).next() : $(this).parent().next();
 7:　　　if ($target[i].length) {
 8:　　　　$(this).click(function(){
　 　　　　　// IE においては右側をアニメ起終点にすると固まる事が多いので、
　 　　　　　// 強制的に同種の左側起終点に指定を替える。
 9:　　　　　if (jQuery.browser.msie)
10:　　　　　　var k = i==2 && 1 || i==3 && 4 || i==6 && 8 || i;
11:　　　　　else k=i;
　　　　　 　// slideToggleEx を起動する。
12:　　　　　$target[i].slideToggleEx(k, duration, easing, fn);
13:　　　　　$(this).blur(); // ボタン要素のフォーカスを外す
14:　　　　});
15:　　　}
16:　　});
17:　}
18:　for (var i=0; i<9; i++){ // 0 から 8 迄の巡回処理
　 　　// クリックイベントを登録するオブジェクト clk の i プロパティを作成し、
　 　　// それに "fireSlideToggleEx-i"（ i は 0〜8 ） class 名のノードをもつ
　 　　// jQuery インスタンスを登録する。これにより、ページ内にある
　　　 // fireSlideToggleEx-n クラス名を持つノードを捉える。
19:　　clk[i] = $(".fireSlideToggleEx-" + i);
　 　　// i 番名のノードがなければ loop の先頭行に戻って i++ する。
20:　  if (!clk[i].length) continue;
　　 　// i 番名のノードが存在した場合には、当該インスタンスの
　　 　// 各ノード毎に巡回処理を行うために func 関数を呼び出す。
21:　　func(i);
22:　　clk[i].hover( // マウスオーバー/アウト時のボタン背景色の変更
23:　　　function(){$(this).css({backgroundColor:"pink"})},
24:　　　function(){$(this).css({backgroundColor:""})}
25:　　)
26:　　// マウスが押し下げられた場合の色替え
27:　　.mousedown(function(){$(this).css('background-color','palegreen')})
28:　}
29:});

▲ToTop

コード作成上の苦労話

非常に苦労したのは、slideToggleEx プラグインの再起動の際に、従前値を保持させる措置でした。

無名関数のトップレベルで、slideToggleEx メソッド外に変数を用意すれば解決することなのですが、是が非でもプラグインのメソッド外に変数を置かないでまとめたかったので、拘ってコードを作りました。

その結果、メソッド外となる点では変わらないのですが、『Javascript 第 5 版』p.144 や cycle プラグインを参考にして slideToggleEx メソッドのプロパティに値を保持させることにしました。

この点は極めて重要なポイントなので、じっくりと記述することにします。

メソッド実行が終わるとその中で定義された変数は消失してしまうので、当該メソッドの起動回数を記憶させる変数は当該メソッド外になければなりません。しかし外に変数を置くのは美しくありません。

そこでメソッドのプロパティを記憶装置にすることにしました。

そのことについて具体的にコードに触れながら、以下で説明したいと思います。

▲ToTop

メソッドのプロパティに情報を記録させる方法
 1:　var $target=this;
 2:　var o = $.extend({},$.fn.slideToggleEx.opts);
 3:　// 初めてそのインスタンスから呼ばれたか、インスタンスが変わった場合のみ
 4:　if(!o.target || o.target[0]!==$target[0]) {
 5:　　$.extend(o,{
 6:　　　orig : o,
 7:　　　target : $target,
 8:　　　oH : $target.outerHeight() + parseInt($target.css("margin-top"))
 9:　　　　+ parseInt($target.css("margin-bottom")),
10:　　　oW : $target.outerWidth() + parseInt($target.css("margin-left"))
11:　　　　+ parseInt($target.css("margin-right")),
12:　　　odd : false
13:　　});
14:　　$.fn.slideToggleEx.opts = $.extend($.fn.slideToggleEx.opts,o);
15:　　if ($target.css("position") ==="static")
16:　　　$target.css({position:"relative",top:"0",left:"0"});
17:　}
18:　o.odd = $.fn.slideToggleEx.opts.odd = !$.fn.slideToggleEx.opts.odd;

上の 18 行のコードは slideToggleEx プラグイン（ position 指定版 ）の最初の部分から抽出したものです。

  1. まずインスタンスへの参照を $target 変数に登録します（#1）。

    これはインスタンスへの参照が必要な場合にその都度 this を使うと、シーンによっては参照先が変わってしまうことがあるので、何らかの変数が必要だからです。別に self でも良いのですが、cycle プラグインに倣って jQuery インスタンスへの参照であることが視覚的にわかるように $ を使い、また target とすることによりアニメ対象であることを意味的にも表示するようにしました。

  2. 次にメソッドの opts プロパティを o オブジェクトに転写します（#2）。

    この行は極めて重要な役割を果たします。これで o オブジェクトに初期値が設定されると共に、同じインスタンスからの 2 度目以降の slideToggleEx の呼び出しの際には、初回呼び出し時に設定された諸値が、初回呼び出し時の 14 行の実行によって、opts プロパティに登録されているので、情報満載のその opts が o に複写されます。

    この結果、4 行目の if 文において、o.target プロパティは存在するし、o.target[0] === $target[0] となるので、4 〜 17 行がパスされます。こうして同じインスタンスに対して、諸値設定を繰り返させない効率化を実現しました。

  3. 他方、slideToggleEx の最初の呼び出しの際、またはインスタンスが変わった時の呼び出し時には、o.target プロパティが存在しないか、o.target[0] と $.target[0] は異なるため、4 行目の if 文が成立し、5 〜16 行が実行されます。

    まず、opts オブジェクトの初期値をバックアップするために、それが転写された o オブジェクトを orig プロパティに保存します（#6）。このバックアップは当面使いませんが、何らかの必要が後で生じるかもしれないとの老婆心です。

    次に、target プロパティに $target への参照を登録します（#7）。これにより上で述べたような 二度目以降の呼び出し時の if 文不成立を成り立たせます。

  4. o.oH と o.oW には インスタンスに登録されている最初の要素の外寸を登録します。これも 1 回だけ測ればよいので if 文の中に入れました（#8 〜 11）。
  5. o オブジェクトの最後のプロパティは起動回数を記録するためのプロパティです。これは 18 行との関係で false とする必要があります（#12）。
  6. 以上により初回呼び出し時にだけ、インスタンスに係る諸情報を設定・獲得し、その値を 2 行目で得た o オブジェクトに上書きし(#5)、その直後にその拡張された o オブジェクトを opts オブジェクトに併合します（#18）。こうすることにより、o オブジェクトが持つ情報が opts オブジェクトに複写・保存され、slideToggleEx が実行を終えても、当該インスタンスに係る情報を slideToggleEx.opts プロパティが保持し続けます。
  7. 15 〜 16 行では 当該インスタンスに登録された要素の position 指定をチェックし、relative になっていなければそのように設定します。

    こうすることにより slideToggleEx 対象要素を作成する時には一々 position 指定をしなくても良いようにしました。なおこの処置も当然 1 回だけ行えばよいので、if 文の中で行います。

  8. 最後の 18 行は、起動回数を記録するためのコードです。

    12 行で false とされた o.odd 値は 14 行によって opts.odd = false と複写されます。そして 18 行でこれを否定することにより opt.odd は trueとなり、これが o.odd にも代入されます。

    こうして初回起動時の o.odd 値は true となり奇数回目であることが登録されます。二度目の呼び出し時には 2 行からいきなり 18 行に飛ぶので 18行の o.odd は false、つまり偶数回目となります。

    ここにおいて、常に opts.odd に偶数/奇数回数を示す値が保持され続け、そこから o.odd 値が複写され、呼び出しの都度変更されることがポイントです。

  9. 最後に、slideToggleEx を呼び出すインスタンスが変わった場合のコード進行を説明します。

    この時には if 文の 2 番目の条件が効果を発揮します。起動元インスタンスが変われば、2 行目によってゲットされる o.target はそれ以前の別のインスタンスへの参照を保持しているため、必ず o.target[0] は $.target[0] と異なります。こうして if 文が成立し、改めて起動元インスタンスの要素サイズ（ o.oH と o.oW ）が計測されます。

    そして、その結果は 14 行で opts オブジェクトに複写され、当該インスタンスからの二度目以降の呼び出し時には改めて o オブジェクトに複写されます。

    こうして以前のインスタンスに登録されていた要素のサイズ計測結果は、上書きされて消失し、新しい現在の呼び出し元インスタンスに登録されている要素のサイズが opts オブジェクトに保持され、o オブジェクトに登録されます。

▲ToTop

クリックイベント登録と slideToggleEx 対象要素を特定するためのコードについて

このコードはプラグインメソッドではありませんが、容易に slideToggleEx プラグインを利用するために不可欠なものです。そして作成にかなり苦労を重ねた難産コードでした。そこで一節を設けて詳細に説明しておきたいと思います。

■ クリックイベントと slideToggleEx 適用対象を登録するためのコード （ 再掲です ）
/* regist click Event to fire slideToggleEx() for nextBlock */
 1:$(function(){ // 当然 DOM が Ready されてから起動する必要があります。
 2:　var duration = 1000, easing = null,fn = function(){}, clk = {};
 3:　function func(i){
 4:　　$.each(clk[i],function(){
 　　　　// target オブジェクトは slideToggleEx 対象の個々のノード 1 つだけを格納する。
 5;　　　var $target={};
　　　 　// $target オブジェクトの j プロパティに slideToggleEx 対象ノードを格納する。
　　　 　// fireSlideToggleEx-x クラス指定されたボタン要素がブロック要素の場合には
　　　 　// next siblingを block 以外の inline 要素の場合には親要素の
　　　 　// next sibling 要素を slideToggleEx 対象とする。
 6:　　　$target[i] = $(this).css("display")=="block" ? $(this).next() : $(this).parent().next();
 7:　　　if ($target[i].length) {
 8:　　　　$(this).click(function(){
　 　　　　　// IE においては右側をアニメ起終点にすると固まる事が多いので、
　 　　　　　// 強制的に同種の左側起終点に指定を替える。
 9:　　　　　if (jQuery.browser.msie)
10:　　　　　　var k = i==2 && 1 || i==3 && 4 || i==6 && 8 || i;
11:　　　　　else k=i;
　　　　　 　// slideToggleEx を起動する。
12:　　　　　$target[i].slideToggleEx(k, duration, easing, fn);
13:　　　　　$(this).blur(); // ボタン要素のフォーカスを外す
14:　　　　});
15:　　　}
16:　　});
17:　}
18:　for (var i=0; i<9; i++){ // 0 から 8 迄の巡回処理
　 　　// クリックイベントを登録するオブジェクト clk の i プロパティを作成し、
　 　　// それに "fireSlideToggleEx-i"（ i は 0〜8 ） class 名のノードをもつ
　 　　// jQuery インスタンスを登録する。これにより、ページ内にある
　　　 // fireSlideToggleEx-n クラス名を持つノードを捉える。
19:　　clk[i] = $(".fireSlideToggleEx-" + i);
　 　　// i 番名のノードがなければ loop の先頭行に戻って i++ する。
20:　  if (!clk[i].length) continue;
　　 　// i 番名のノードが存在した場合には、当該インスタンスの
　　 　// 各ノード毎に巡回処理を行うために func 関数を呼び出す。
　　 　// ここに func 関数の第 1 引数 clk[i] が外側の関数内にある変数 clk への
　　 　// 参照を保持しているので、func 関数はクロージャーとなっている。しかし、
　　 　// グローバル環境から func 関数への参照はないので、クロージャーを通じた
　　 　// ローカル変数の活用は行っていない。
21:　　func(i);
22:　　clk[i].hover( // マウスオーバー/アウト時のボタン背景色の変更
23:　　　function(){$(this).css({backgroundColor:"pink"})},
24:　　　function(){$(this).css({backgroundColor:""})}
25:　　)
26:　　// マウスが押し下げられた場合の色替え
27:　　.mousedown(function(){$(this).css('background-color','palegreen')})
28:　}
29:});

要点は以下の通りです。

  1. 一般的に同一ページ内で複数の slideToggleEx 対象があるのは当たり前であり、更に同一の起終点から起動させる slideToggleEx 対象が複数ある場合も決して少なくないこと。
  2. 従って class 名を頼りに click イベントを登録するものの（ 使う度に決めなければならない id を頼りにすることは出来ません。）、同一 class 名の要素がそれぞれ個別に識別できなければなりません。さもないと、1 つのボタンをクリックした際に、同一クラス名を有する slideToggleEx 対象ノードの全てが一斉にアニメートしてしまいます。

以上の要点を踏まえたコードは結構複雑な構成になりました。

  1. (#2) イベント登録オブジェクト clk を用意します。
  2. (#3 〜 17) 個々のノードに対してクリックイベントを登録する関数を定義します。この関数を設けたことには大きな意味があります。関数化しないで 21 行の位置に each メソッドを置くと、for loop 内にあるために、どんな場合でも slideToggleEx の第 1 引数が 9 となってしまうからです。
  3. (#18) 9 回の巡回処理により、クラス名を頼りに、個々のノードに対してクリックイベントを登録します。
  4. (#19)まず、クリックイベントを登録するオブジェクト clk の i プロパティを作成し、それに "fireSlideToggleEx-i"（ i は 0〜8 ） class のノードをもつ jQuery インスタンスを登録します。このインスタンスは複数のノードを含んでいる場合もあり得ます。
  5. (#20) ノードが 1 つも含まれなければ、i が 1 増されてループの最初から処理が再開されます。
  6. (#21) func(i)を呼び出します。この関数が個々のノードに対してクリックイベントを登録します。
  7. (#4) clk[i] インスタンスに登録されたノードの数だけ each 巡回処理を繰り返します。
  8. (#5) $target オブジェクトはその i プロパティに slideToggleEx 対象の個々のノードを 1 つずつを格納するオブジェクトです。
  9. (#6) this は clk[i] に登録されている 1 つのノード を意味します。その jQuery インスタンス $(this) の display style 値を調べて、next sibling 要素への参照を $target[i] プロパティに登録します。
  10. (#7) 返されたインスタンスに slideToggleEx 対象となるノードが 1 つ以上あれば 8 行目以降が実行されます。
  11. (#8) 個々の要素 ( $(this)、つまり clk[i] に登録されている各ノード) に click イベントを登録します。こうして個々の要素毎に、個々の slideToggleEx 対象が特定されてクリックイベントが登録されます。
  12. (#9 〜 10) IE の場合ブロックの右側を起終点とするアニメーションは固まる場合が多々あります。

    そこで IE に限って右側の起終点を利用せずに、同等の左側起終点となるように変換します。

  13. (#11) IE 以外のブラウザの場合の処理です。
  14. (#12) $target[i] から slideToggleEx メソッドを起動します。
  15. (#22 〜 27) これらの行は一般的なコードです。
FC2ブックマークに追加

jquery.js のアニメーションコードの解読 ( 10 ) 番外編 easing関数解読

easing 関数＜解読＞

解読とは大袈裟すぎるかもしれませんが、一見複雑に見える easing 関数式ですが、実は中学生程度の関数の知識があれば十分理解できるものであることを、恥ずかしながら最近納得したばかりなのです。

そこで、easing 関数が実は簡単な代数式であることを改めて整理しておこうと思います。それも中学校で倣う関数の形式に、表現し直してみます。

対象とする easing 関数は jquery.js で定義されている linear 及び swing の他、George Smith 氏による 30 種類の easing 関数です。

以下の表における大前提
  1. 数値の正規化

    大前提として、jquery.js における正規化を踏まえるので、easing 代数式の文字の意味は次のようになります。

    t: current time ：これは経過時間ですが、jquery.js においては、t を d で割った経過時間推移率とでも呼ぶべき値が t に代入され、それがグラフの横軸変数値となります。

    b: begInnIng value ： 初期値は jquery.js では常に 0 です。b = 0

    c: change In value ： 変動値は jquery.js では常に 1 です。c = 1

    d: duration ： 継続時間ですが、関数式の中には直接登場することは殆どありません。

  2. easeIn と easeOut の関係

    x → 1−x, y → 1 - y へと座標変換を施すことによって、easeIn 関数から自動的・反射的に easeOut 関数が導き出せます。

  3. easeInOut 関数の作り方

    この関数は、経過時間推移率が 0.5 以下の場合には easeIn 関数を、それ以上の時には easeOut 関数を適用するだけのことです。

  4. 解読は easeIn だけで十分

    つまり、easeIn 関数が分かれば、座標変換と場合分けによって、簡単に easeOut 関数とeaseInOut 関数が出来てしまうので、easeIn 関数だけ＜解読＞すれば必要にして十分です。

見慣れた関数式への変換

以下の式において、x は時間推移率（ t/d ）を、y は easing 関数値を表しています。b,c,t,d は easing 関数で定められている通りの定義です。上に述べた事を踏まえて b = 0, c = 1, t/=d → x としました。

関数名Javascript関数式見慣れた関数式
linearb + c * ty = x
swing((-Math.cos(t * Math.PI)/2) + 0.5) * c + b y = -( cos(x * π) ) / 2 + 0.5
easeInQuadc*(t/=d)*t + by = x 2
easeInCubicc*(t/=d)*t*t + by = x 3
easeInQuartc*(t/=d)*t*t*t + by = x 4
easeInQuintc*(t/=d)*t*t*t*t + by = x 5
easeInSine-c * Math.cos(t/d * (Math.PI/2)) + c + by = - cos(x * π/2) + 1
easeInExpo(t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + by = 2 10 * ( x-1 ),
x が 0 の時は y = 0
easeInCirq-c * (Math.sqrt(1 - (t/=d)*t) - 1) + by = - (1 - x * x)0.5 + 1
easeInBackif (s == undefined) s = 1.70158; return c*(t/=d)*t*((s+1)*t - s) + b; y = x * x * ( 2.70158 * x - 1.70158 )
easeOutBounce((t/=d) < (1/2.75))
　c*(7.5625*t*t) + b;
(t < (2/2.75))
　c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
(t < (2.5/2.75))
　c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
else
　c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; 		・x < 1/2.75 → 7.5625* x * x
・x < 2/2.75 → 7.5625* (x-1.5/2.75) * (x-1.5/2.75) +0.75
・x < 2.5/2.75 → 7.5625* (x-2.25/2.75) * (x-2.25/2.75) +0.9375
・x >= 2.5/2.75 → 7.5625* (x-2.625/2.75) * (x-2.625/2.75) +0.984375
easeInElastic var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
作成中
FC2ブックマークに追加

jquery.js のアニメーションコードの活用 ( 2 ) アニメを使ってグラフを動的に描く

アニメーションを使ってグラフを描く

アニメーション活用エントリイの 2 つ目は、アニメーションを活用してグラフを書くコンテンツです。

そもそも、easing 関数のグラフ化を考えていたのですが、エクセルなどで作って貼り付けるのは余りにも芸がないと思われ、何とか Web サイト上で動的にグラフが描けないだろうか、と前から思っていました。

そして jquery.js のアニメーション解読を進めていく内に、easing 関数それ自体に興味を持ったことと併せて、アニメーションの options.step メソッドを使えば、アニメ途中の情報を取得できるのでグラフが書ける───入浴中にふと（苦笑）、そのことに気付きました。

構想ﾆ 1 日間、コーディングに約 2 日を要して（ と言っても勤めながらなので、夜と朝だけのマイタイムですが ）、何とか具体的な成果に漕ぎ着けました。

以下がその結果ですが、何はともあれ、アニメ継続時間を 2 秒か 4 秒程度にし、適当な easing 関数を選択してから、グラフ作成ボタンをクリックしてみてください。

僅か 3 クリックで、今選択した継続時間を要して青いボックスが左下に閉じられ、その後また同じ継続時間を使って右上方向に開かれます。これで「 グラフの座標 」が完成します。

そしてボックスが開き終わると、数10ミリ〜数100ミリ秒後にそのボックス内に、今適用された easing 関数のグラフが描かれます。このときボックス下辺はグラフ横軸となって継続時間の推移割合を示し、、ボックス左辺は縦軸となり easing 関数値を表しています。

なお、グラフの大きさは相対的な問題に過ぎません、以下の例示の場合には、青いボックスの大きさ（つまりグラフ座標）を、レイアウト上の必要性から偶々 350 px 角としました。その結果Ｘ軸、Ｙ軸両方向とも、時間推移割合と関数値を 350 倍してグラフを作成しています。

【注意】
IE では関数値が 0 未満または 1 を越える easing 関数の場合、固まってしまうようです。ですから Back、Elastic などは IE ではグラフ描画は出来ませんが、もし固まった場合には、この頁をリロードすれば、Javascript の 「 凝固状態 」 を解除出来ます。

  1. まず選択した easing 関数の効果を、ボックス隠蔽 / 表示の 2 つのアニメーションを通じて確認してください。
  2. ボックスが開き終わると直ぐに、今選択し、ボックスの開閉に利用した easing 関数のグラフが、開き終わったボックス内に描かれます。
アニメ継続時間
適用 easing

▲ToTop

グラフ描画の仕組み

jquery.js における easing 関数の扱い
easing 関数とは

「 easing 」 は速度を増減するときに使うもの、とされています。（ イージング (Easing) とは | FLASH関連用語集 | ミツエーリンクス ）。つまり easing 関数は動きを加速し、あるいは減速する加速度の役割をもっています。

そして、横軸に時間を、縦軸に変動値を取って「 動き 」をグラフ化した場合において、それが直線であれば等速で動いたことを表し、直線の角度は速度の高低を意味します。そして直線でない曲線部分は、加速度が働いた部分であり、上に凸ならば減速、下に凸ならば加速となります。

さて、easing 関数は Tween クラスの場合も jquery.js の場合も、基本的に次の 4 つの変数により変化する二次元関数です。初期値(b)、変動幅(c)、アニメの継続時間(d）、そして現在までの経過時間(t)です。つまり、中学校時代に倣った馴染みの関数式 y = f (x) になぞらえれば、easing 関数の基本形式は次のようになります。

変動後の値 = f ( 初期値, 変動幅, 経過時間, 継続時間 )

ここにおいて時間と共に変化する変数はただ 1 つ 経過時間であり、後は全て定数値となります。勿論、変動幅を時間の関数にすれば、それも変化することになりますが、その場合であっても変動幅は経過時間の関数であり、結局経過時間が唯一の変数となります。

jquery.js の easing 関数

jquery.js では変動幅（ c : change で表される場合が多い ）を正規化しています。つまり 0 から始まり 1 で終わるように引数が設定されています（jquery.js ver1.32 #4139）。これにより関数はいわば純化され、事の本質が分かりやすくなっていますし、そのことが easing 関数への理解を深める一助ともなっていると思います。

jquery.js における easing 関数の詳細（plugin 30種類を含む）

jquery.js に含まれている easing 関数は linear と swing の 2 類だけですが、それに30種類を追加するプラグイン （ George Smith 氏による 30 種類の easing 関数 ） があります。

エントリイを改めて、これらの 32 種類の easing 関数の全貌を、昔習った数学の関数式を思い出しながら解明しようと思っています。

▲ToTop

どのように関数値を取得するか

options.step メソッドを使います。

私が今自宅で使用しているパソコンでは､ Firefox でこの頁を開いて計測してみたところ、jquery.js の内部メソッドである e.step メソッドは、1 つのアニメ対象要素の 1 つのアニメ対象プロパティ当たり、1 秒間に約 80 回実行されます。（IE の場合、IE 8 であっても回数はもっと少なくなります。Javascript 実行速度が遅いためです。）

このそれぞれの瞬間毎に、 animate メソッドの引数として指定する options.step メソッドを利用して、（ jquery.js の内部で作成される ） e インスタンスに保持されているアニメ諸情報を取得します。

easing 関数値は e.pos プロパティに保持されていますので、これを取りだして配列に格納し、その後その配列の各要素を使って、e.step が間歇的に取得した情報から、取得しなかった中間値を補間する計算を行わせて、空隙部を埋めます。

こうして横軸の全てのピクセル数 350 個に対応する関数値を取得又は推定し、グラフ化します。

グラフは 1 × 1 dot の点を 順に青いボックス内に append することにより描きます。

詳細はコード解説部分で触れます。

options.step メソッドで取得できない座標値の補間方法

「 無視できるほど小さい部分では曲線は直線と見なすことが出来る 」という微分の考え方に拠りました。決して複雑ではなく、つまりは単なる直線補間です（苦笑）。

当然アニメ継続時間を長くすればするほど、stepメソッドの呼び出し回数が増えるので、補間値が減り、step メソッドによる算出値が増え、グラフは正確さを増します。

このことは継続時間を長短変えてグラフを描かせてみると良く分かります。継続時間が短いとグラフは直線部分が増え、長くすると直線が減っていきます。これは計算により算出した補間値の数が減るためです。

この件に関する詳細もコード解説部分で触れます。

コーディングの苦労話

ここで行ったことは、ボックスアニメーションを引き起こしつつ、そのボックス内にそのアニメに使用した easing 関数のグラフを書かせるという複合的なアニメーションです。

それ故に、コーディングではグラフを描かせるタイミングについて、幾つかテストしながら調整しました。辿り着いたのは、options.step メソッドの最中でもなく、完全にアニメが終わってからでもなく、step メソッドによる情報取得が終わった段階で直ぐに補間値算出を始めさせ（ この段階ではアニメーション動作は進行中です ）、かつその補間値計算が終わったら直ぐにグラフ描画を始めさせる、という併行的なコード進行でした。

補間値計算やグラフのプロット作業がアニメーションの進行に干渉せず、かつアニメ完了後出来るだけ短時間でグラフ描画を行わせる最適な方法を探った結果こうなりました。

次に、2 つのバージョンを作った経緯を書いておきたいと思います。

最初に作成したのは以下に掲げた Ver 1 です。このコードは良く見渡すと、drawGraph メソッドが呼ばれる度毎に、アニメ対象の高さ・幅を計算し、隠蔽/表示用アニメ CSS を作り、duration・easing・complete を算出し、step メソッドを登録しています。これはいかにも無駄です。

そこで二度目以降の drawGraph メソッド呼び出し時には、初回呼び出し時に算出した各値を可能な限り再利用するようなコード進行に変更すべきだと思い、Ver 2 を作りました。

▲ToTop

プラグイン drawGraph() メソッドコード
■プラグイン drawGraph() メソッドコード
// ▼ Ver 2 : コード進行の効率化を考慮した改訂版
 1:(function($){
 2:$.fn.drawGraph = function(d,e,fn){
 3:　var $box=this, o={}, cnt=0, allsteps=0,layout=[], dotAry=[], arrgAry=[];
 　　// メソッド実行後も o オブジェクトのプロパティ値を保持させるために、
 　　// drawGraph メソッドの opts プロパティを作る。
 4:　if (!arguments.callee.opts) arguments.callee.opts={};
　 　// drawGraph メソッドの opts プロパティがあれば、o オブジェクトに併合する。
　 　// これにより 2 度目以降の drawGraph 呼び出し時に o オブジェクトに opts が複写される。
　 　// その opts は、直前の drawGraph メソッド実行時に 6 〜 19 行で作成された o オブジェクトが
　 　// 20 行において複写されたものなので、2 度目以降の drawGraph 呼び出し時には、
　 　// 直前実行時に作成したプロパティが o オブジェクトに格納される。
 5:　else $.extend(o, arguments.callee.opts);
　 　// box プロパティがないか（初回呼び出し時）、登録されているノードが異なる場合
　 　//（今回の使い方では呼び出し元は常に同一なので、ノードが異なることはないが
　 　// 一般化するために敢えて後者の条件を書いておく。）
 6:　if (!o.box || o.box[0] !== $box[0] ) {
 7:　　o.box = $box; // this への参照を登録する
 8:　　o.log = $box.next(); // log 表示用ノードへの参照を獲得する。
 9:　　o.h = $box.height(); // アニメ対象ノードの高さを測定する。
10:　　o.w = $box.width(); // アニメ対象ノードの幅を測定する。
11:　　o.hideCSS = {height:"toggle",width:"toggle",top:"+="+o.h+"px"}; // 隠蔽アニメ用CSS
12:　　o.showCSS = {height:"toggle",width:"toggle",top:"-="+o.h+"px"}; // 表示アニメ用CSS
13:　}
　 　// duration プロパティがないか、あっても引数と異なる場合にのみ 引数 d を o.duration に登録する。
14:　if (!o.duration || o.duration !== d) o.duration = d;
　 　// easing プロパティがないか、あっても引数と異なる場合にのみ 引数 e を o.easing に登録する。
15:　if (!o.easing || o.easing !== e) typeof o.duration ==="object" ? "" : o.easing = e;
　 　// fn が存在して関数で complete プロパティがないか、complete が fnと異なる場合
　 　// fn を o.complete に代入し、その他の場合には何もしない関数を代入する。
16:　o.complete = typeof o.duration ==="object" ? "" :
17:　　fn && $.isFunction(fn) && (!o.complete || o.complete!==fn) ? fn : function(){};
　　 // stepObj は毎回作成しないと doStep が初期化されない。
18:　o.stepObj =　typeof o.duration ==="object" ? $.extend({},o.duration,{step:doStep}) :
19:　　{duration:o.duration, easing:o.easing, complete:o.complete, step:doStep};
　　 // 以上迄で作成された o オブジェクトを opts に複写し、2 度目以降の drawGraph
　　 // メソッド起動時に o オブジェクトの複写元とする。
20:　$.extend(arguments.callee.opts, o);
21:
22:　function doStep(){ // step メソッドを使ってグラフの横軸値と縦軸値を取得する
23:　　var e = arguments[1]; ++allsteps; // e.options.step の第 2 引数である e オブジェクトを代入
24:　　if (e.prop!=="height") return; // height プロパティ以外の時には何もしない。
25:　　++cnt ;
26:　　layout[cnt]={};
27:　　layout[cnt]["top"] = ( 1-e.pos ) * o.h; // グラフの縦軸値（ easing 関数値 ）
28:　　layout[cnt]["left"] = e.state * o.w; // グラフの横軸値（ 時間推移率 ）
29:　　dotAry.push(layout[cnt]); // layout 配列の要素を dptAry 配列に格納する。
　　　 // 時間推移率が 100 ％以上になったら直線補間関数を呼び出す。
30:　　if (e.state >= 1) arrangeGraph();
31:　}
32:　function arrangeGraph(){ // 直線補間関数
33:　　var len = dotAry.length;
34:　　while (len){
　 　　　// dotAry の先頭要素を削除して arrgAry 配列に格納
35:　　　arrgAry.push(dotAry.shift());len--;
　　　　 // dotary 配列の次の要素のleft値と、格納されたばかりの dotstack 配列要素の left 値の差をとり
36:　　　if (!len) break;
37:　　　var diffLeft = Math.round(dotAry[0].left) - Math.round(arrgAry[arrgAry.length-1].left);
　 　　　// 差がなければ同一値と見なして dotary 配列の先頭要素を削除
38:　　　if (diffLeft == 0) {dotAry.shift();len--;}
　　　　 // 差が 1 ならば次の値なので dotAry 配列の先頭要素を削除し、それを arrgAry 配列に追加する
39:　　　else if (diffLeft == 1) {arrgAry.push(dotAry.shift());len--;}
40:　　　else {// 差が 2 以上あれば、補完値算出用に、その差で top 値を割って平均値を出す
41:　　　　var avr = (dotAry[0].top - arrgAry[arrgAry.length-1].top) / diffLeft;
42:　　　　for (var j=1, obj={}; j<diffLeft ;j++){
43:　　　　　// 差の数−1 回だけ補完値を算出し、arrgAry 配列に追加する。
44:　　　　　obj ={
45:　　　　　　top: arrgAry[arrgAry.length-1].top + avr, 
46:　　　　　　left: ++arrgAry[arrgAry.length-1].left
47:　　　　　};
48:　　　　　arrgAry.push (obj);
49:　　　　}
50:　　　}
51:　　}
52:　　plotGraph();
53:　}
54:　function plotGraph(){ // ボックス内にグラフを描く
55:　　$box.append("<div id='selectedEasingName' style='position:absolute;top:5px;left:15px;'>"+ o.easing +"</div>");
56:　　o.log.html("height prop の step 起動回数 ："+ cnt +"<br />全ての step 起動回数：" + allsteps);
57:　　for (var i=0, len = arrgAry.length; i<len; i++){
58:　　　$("<div class='dot hack' />").css({top:arrgAry[i].top+"px",left:arrgAry[i].left+"px"}).appendTo($box);
59:　　}
60:　}
61:
62:　$box.empty(); o.log.empty(); // 表示されている easing 名と log を消す。
　 　// 隠蔽及び表示アニメを引き起こす。表示アニメの時にグラフも描く。
63:　return $box.animate(o.hideCSS,o.duration,o.easing ).animate(o.showCSS, o.stepObj);
64:};
65:})(jQuery);
// ▲ Ver 2 終わり

// ▼ Ver 1 ：サイズ測定と o オブジェクト作成を毎回行っている非効率版
(function($){
$.fn.drawGraph=function(duration,easing,fn){
　var cnt=0, allsteps=0, $box=this, layout=[], dotAry=[], arrgAry=[],
　　　o = $.extend({},{duration:duration, easing:easing});
　$box.h=$box.height(); $box.w=$box.width(); $log=$box.parent().next();
　var hideCSS =  {width:"toggle",height:"toggle",top:"+="+$box.h+"px"},
　　　showCSS =  {width:"toggle",height:"toggle",top:"-="+$box.h+"px"};
　o.step = doStep;
　o.complete = function(){$.isFunction(fn) ? fn() :function(){} };

　function doStep(){
　　var e = arguments[1]; ++allsteps;
　　if (e.prop!=="height") return;
　　++cnt ;
　　layout[cnt]={};
　　layout[cnt]["top"] = ( 1-e.pos ) * $box.h;
　　layout[cnt]["left"] = e.state * $box.w;
　　dotAry.push(layout[cnt]);
　　if (e.state >= 1) arrangeGraph();
　}

　function arrangeGraph(){
　　var len = dotAry.length;
　　while (len){
　　　// dotAryの先頭要素を削除して arrgAry 配列に格納
　　　arrgAry.push(dotAry.shift());len--;
　　　// dotary 配列の次の要素の left 値と、格納されたばかりの dotstack 配列要素の left 値の差をとり
　　　if (!len) break;
　　　var diffLeft = Math.round(dotAry[0].left) - Math.round(arrgAry[arrgAry.length-1].left);
　　　// 差がなければ同一値と見なして dotary 配列の先頭要素を削除
　　　if (diffLeft == 0) {dotAry.shift();len--;}
　　　// 差が 1 ならば次の値なので dotAry 配列の先頭要素を削除し、それを arrgAry 配列に追加する
　　　else if (diffLeft == 1) {arrgAry.push(dotAry.shift());len--;}
　　　else {// 差が 2 以上あれば、補完値算出用に、その差で top 値を割って平均値を出す
　　　　var avr = (dotAry[0].top - arrgAry[arrgAry.length-1].top) / diffLeft;
　　　　for (var j=1, obj={}; j<diffLeft ;j++){
　　　　　// 差の数 - 1 回だけ補完値を算出し、arrgAry 配列に追加する。
　　　　　obj ={
　　　　　　top: arrgAry[arrgAry.length-1].top + avr, 
　　　　　　left: ++arrgAry[arrgAry.length-1].left
　　　　　};
　　　　　arrgAry.push (obj);
　　　　}
　　　}
　　}
　　plotGraph();
　}

　function plotGraph(){
　　$box.append("<div id='selectedEasingName' style='position:absolute;top:5px;left:15px;'>"+ o.easing +"</div>");
　　$log.html("height prop の step 起動回数 ："+cnt+"<br />全ての step 起動回数：" + allsteps);
　　for (var i=0, len = arrgAry.length; i<len; i++){
　　　$("<div class='dot' />").css({top:arrgAry[i].top+"px",left:arrgAry[i].left+"px"}).appendTo($box);
　　}
　}

　$box.empty();$log.empty();
　return $box.animate(hideCSS,duration,easing ).animate(showCSS, o);
};})(jQuery);
// ▲ Ver 1 終わり

// drawGraph プラグインを使って実際にグラフを書かせるためのコード
(function($){
　var selDuration=2000,selEasing="swing";
　// アニメ継続時間コンボから 選択された duration を取得
　$("#sel1_728").change(function(){selDuration = +$(this).val();});
　// easing リストから 選択された easing 関数を取得
　$("#sel2_728").change(function(){selEasing = $(this).val();});
　$("#btn1_728").click(function(){$("#box1_728").drawGraph(selDuration,selEasing);});

　$("input").mouseup(function(){$(this).css({backgroundColor:""}).blur();})
　　.hover(function(){$(this).css({backgroundColor:"pink"});}
　　,function(){
　　　　$(this).css({backgroundColor:""});
　　})
　　.mousedown(function(){$(this).css({backgroundColor:"lightgreen"})});
})(jQuery);

▲ToTop

drawGraph() メソッド Ver 2 に関する補足説明

直前起動時に作成したアニメ対象に関する諸情報を出来る限り 2 度目以降に活用する───これが Ver 2 作成の動機であり目的です。『 Javascript 第 5 版 』p.144 を参考にして、メソッドのプロパティを活用する方法を作ったまでは良かったのですが、なかなか順調に動きませんでした。18 行目の stepObj も他のプロパティと同様に初回作成時の値を使うコードを書いたのですが、これが躓きの原因でした。

14〜17 の 4 行では、o.duration、o.easing、o.complete の各プロパティの存在を確認し、それがあれば何もしないようなコードを書きました。こうしてコード進行の効率化を図ったのでした。

そしてそれ自体は問題なく動いたので、安心して 18 行も if (o.stepObj) 文を書いてしまったのです。

ところが、こうすると 2 度目以降においては o.stepObj は再定義されないので、初回時の値をそのまま保持し続けてしまいます。その結果 3 行目の cnt = 0 が 2 度目以降に読み込まれ初期化されても、その後の過程で opts プロパティに o オブジェクトを複写・待避させているため、o.stepObj 内の cnt は初期化されず累積されてしまうのです。

そのことが分かるまでに数時間を要したのですが、大きな落とし穴に落ち込んでしまった結果、貴重な経験を重ねることが出来ました。

▲ToTop

FC2ブックマークに追加

jquery.js のアニメーションコードの活用 ( 1 ) slideToggleEx メソッドの作成

アニメコードの活用とは

これまで 9 回に亘ってエントリイしてきたアニメーションコードの解読を踏まえて、今度はアニメーションコードを活用した、実例を掲載してみようと思います。

作成した（及び作成予定の）実例
  1. slideToggleEx() プラグインメソッド

    こちらは苦労の末やっと作成を完了し、このエントリイの下の方にその実例とコードを掲載しました。

    このプラグインメソッドは、端的に言って slideToggle() メソッドの拡張版です。

    jquery.js に収められている slideToggle() は slideDown() と slideUp() メソッドを交互に実行する切り替えメソッドで、ボックス領域の表示と隠蔽を上辺を基点として切り替える作用を起こします。

    今回作成した slideToggleEx() メソッドは、slideToggle() が表示/隠蔽を上辺だけから行うのに対して、以下のように様々な箇所から表示され、隠蔽されるように、大幅に機能拡張したものです。

    slideToggleEx() メソッドは、ボックスの (0) 中心、(1) 左上、(2) 右上、(3) 右下、(4) 左下、(5) 上辺、(6) 右辺、(7) 下辺及び (8) 左辺の、全部で 9 つのアニメ起終点に対応させた、ボックスの縮小隠蔽 / 展開表示を行うアニメーションです。

    起終点は簡単に引数だけで指定出来るように工夫し、更に、同一ボタンのクリックによる、或る起終点からの隠蔽/表示アニメーションだけでなく、様々な起終点からのアニメを、連続して起動しながら、隠蔽/表示を繰り返す連続アニメーションにも対応させた、まさしく機能拡張版です。

  2. easing 関数の値をグラフ化するアニメーションを作成します。

    これはボックスのサイズを大きくするアニメーションを行なわせながら step メソッドを活用し、その時に使用している easing 関数の値を、当該ボックスの中にグラフとして示すものです。グラフをアニメーション機能を使って描くという試みにチャレンジしてみます。

    実は次のエントリイにそのグラフ描画アニメーションを掲載しました。

  3. ボックスだけでなく画像も同時に animate するメソッド

    こちらはまだ未着手です。cycle アニメーションのように、画像も一緒に拡大縮小するアニメーションを作る予定です。

    なおこのメソッドは、これまでのように表示されているコンテンツをアニメートするのではなく、非表示あるいは存在していなかったものをアニメートで出現させるタイプになるはずです。

  4. その他これから考えますが、余り複雑にしても意味はないでしょう。組み合わせれば済むことですから。

▲ToTop

完成した slideToggleEx() メソッドについて

何はともあれ、結果をお披露目します。

当然のことですが、 slideToggleEx() メソッドはプラグイン形式、つまり、jQuery プロトタイプオブジェクトとして作成しました。こうすれば使い勝手がより一層汎用的になるからです。

 
 
18 個のアニメーションを slideToggleEx() で一気に履行する

上の 「 slideToggleEx() 一気履行 」 ボタンをクリックすると、「 ボックスを終点に隠蔽し、そこを始点として展開する 18 の連続アニメーション 」 が始まります。

アニメーションは、ボックスの (0) 中心、(1) 左上、(2) 右上、(3) 右下、(4) 左下、(5) 上辺、(6) 右辺、(7) 下辺及び (8) 左辺の 9 つの点または辺をこの順番に起終点/線とし、 閉じて開く 2 回 × 9 種類、つまり 18 回連続して起動されます。このアニメではそれぞれのアニメ継続時間は全て 1 秒とし、easing 関数は全て同一の、穏やかな swing を使いました。

なお、この連続起動アニメも、上で説明する 3 つの個別起動アニメも全て、上の薄黄色地ボックスの中にある、 青地金色ボーダーのボックスを対象として作動します。また動くボックスの元の位置が分かるように、アニメ対象ボックスを包み込む不動の背景ボックス（背景色ブラウン）を配置してあります。これにより margin を含めてアニメ対象になっていることが視覚的にも確認できるはずです。

slideToggleEx() を単独で使ってみる。

(1) 起終点がボックス中心、(2) 起終線が左辺、(3) 起終点が右下隅 ── の 3 つを上に用意しました。

これらはそれぞれに単独で作動し、1 回目のボタンクリックで隠蔽アニメが、同一ボタンの2 回目のクリックで表示アニメが、それぞれ起動します。アニメ継続時間は全て 2 秒に設定しました。

easing 関数と IE

ここで easing 関数と IE の関係について一言付言しておきます。上の単独起動のアニメーションには全て IE で動くことを確認した、それぞれ異なる easing 関数を使用しています。

値が 0 を下回るか、1 を越えるような easing 関数を指定すると、Firefox では問題なく動くのですが、IE の場合固まってしまいます。使っている easing 関数セットは、最も有名と思われるオーソドックスな jQuery Easing Plugin (version 1.3) なので、関数指定に問題があるとは思えません。

どうして IE では動かないのか解明出来ず、このために上のサンプルでは、関数値が 0 〜 1 に収まるような easing 関数を選んで指定しました。

▲ToTop

プラグイン slideToggleEx() の仕様

■ slideToggleEx() の仕様

　書式： slideToggleEx ( type, duration, easing, function )

　type： 0−中心、1−左上端、2−右上端、3−右下端、4−左下端、
　　　　 5−上辺、6−右辺、7−下辺、8−左辺
　　　　　 ───　この数値でアニメ起終点位置を指定します。
　duration； アニメ継続時間（ミリ秒単位、または "slow","fast"。
　　　　　　 無指定の場合 jquery.js の仕様により 400 ミリ秒となります。）
　　　　　　 なお、オブジェクト形式でこの第 2 引数を指定することも可能です。
　easing： easing 関数（文字列で指定します。無指定の場合 
　　　　　　　　　　　　jquery.js の仕様により swing が適用されます）
　function： アニメ終了後に起動する関数を指定します（不要ならば無指定）
　
　※ 第 2 引数をオブジェクト形式で指定する場合には、第 3、第 4 引数は指定しません。

slideToggleEx() の仕様上の特徴

アニメ位置指定について

アニメの位置指定を絶対指定にするか、相対指定とするか、最初は悩みました。そしてその是非を判断するために、両方を作成した上で、ここには相対指定版を掲載しました。相対指定の方がコードをぱっと見て分かりやすいと判断したためです。

アニメの位置指定を絶対指定方式で行う場合には、アニメ対象をラップするボックスが位置指定の基準座標となるため、指定上の容易性を考慮するとアニメボックスのマージン辺と同じサイズの 「 基準ボックス 」 を作らねばなりません。

アニメ位置を相対位置で指定すれば、このような基準座標ボックスの必要性はないので、その意味からも相対指定方式の方が利便性がよいと思われます。

アニメ対象の position 指定について

当初はアニメ対象の CSS に position:relative を指定していましたが、slideToggleEx プラグインの運用を重ねるに連れ、その都度指定することが面倒であることに気がつきました。

slideToggleEx プラグインメソッドは top と left をアニメ対象としていますので、アニメ対象には static 以外の position 指定が為されていなければなりません。しかし、それを一々対象要素に指定するのは結構面倒です。

このため、仮にアニメ対象に position 指定が為されていない場合でも相対指定となるよう、Javascript コードによって強制的に指定することにしました。

outerWidth、outerHeight の true 指定について

jquery.js では outerWidth(true)、outerHeight(true) と指定すると margin 辺迄のボックスサイズを計測する仕様になっています。（#4342 〜 4346）

ところが、非圧縮版の jquery.js においてはその通り機能するのですが、packed 版ではそのコードをチェックしても間違ってはいないと思われるのですが、巧く作動せずボーダー辺迄の採寸しかしてくれませんでした。

ここでは margin 辺までの外寸が欲しかったのでやむを得ず、outerWidth、outerHeight には引数 true を付けずに、ボーダー辺までのサイズを取得しておき、それに margin サイズを追加して margin 辺までの採寸を行わざるを得ませんでした。

▲ToTop

以下のコード等の表示／隠蔽ボタンには slideToggleEx を利用した

コードなどを表示したり隠蔽したりするボタンは、従来から slideToggle メソッドを仕込んでいました。

そして今回、当然ですが、そのボタンには slideToggle ではなく slideToggleEx を仕込みました。

早速実用に供したわけですが、使う上での注意点を列挙しておきます。

実用上の注意点
  1. 表示／隠蔽対象となる要素タグスクロールバーがある場合

    表示／隠蔽対象となる要素タグが、縦または横にスクロールバーがある場合、その要素を隠蔽後に表示させた場合、スクロールバーの幅や高さ分だけ、左にインデントが掛ってしまったり、下が空いてしまったりします。

    これは jquery.js における アニメ時の overflow プロパティの扱いに起因すると思われますが、確定的なことは調査し切れていません。

    従って、特に縦スクロールバーがある要素を slideToggleEx 対象とする場合には、ボックスの右の 2 つの端部や右辺を起終点/線にしないようにするか、あるいはボックス幅を明示的に指定することが賢明です。

  2. IE 対策

    IE ではボックスの右側を起終点とするアニメは巧く作動しません。スクリプトが固まってしまいます。

    このため右上端、右辺及び右下端の 3 つの起終点を指定した場合には、IE だけは、左上端、左辺及び左下端が指定されたものと読み替えるよう、コードを改変しました。

上のアニメ実例における slideToggleEx() の指定内容

直下のボタンをクリックすると、上のアニメ実例を起動させる指定内容が表示されますが、このボタンには No 5 の slideToggleEx 、つまり上辺からのスライドダウン/アップを仕込みました。不透明度もアニメ対象にしているので、slideToggle よりもより印象的になっている、と思います。なお、効果を確認するためにも幾つかのアニメは時間を 1 秒掛けるようにしました。

■上で示した実例の slideToggleEx() 指定内容
<script type="text/javascript">//<!--
$(function(){
　// 18 アニメ連続起動
　$.box = $("#box1_727");
　$("#btn1_727").click(function(){
　　$box
　　　.slideToggleEx(0,1000,"swing")
　　　.slideToggleEx(0,1000,"swing")
　　　.slideToggleEx(1,1000,"swing")
　　　.slideToggleEx(1,1000,"swing")
　　　.slideToggleEx(2,1000,"swing")
　　　.slideToggleEx(2,1000,"swing")
　　　.slideToggleEx(3,1000,"swing")
　　　.slideToggleEx(3,1000,"swing")
　　　.slideToggleEx(4,1000,"swing")
　　　.slideToggleEx(4,1000,"swing")
　　　.slideToggleEx(5,1000,"swing")
　　　.slideToggleEx(5,1000,"swing")
　　　.slideToggleEx(6,1000,"swing")
　　　.slideToggleEx(6,1000,"swing")
　　　.slideToggleEx(7,1000,"swing")
　　　.slideToggleEx(7,1000,"swing")
　　　.slideToggleEx(8,1000,"swing")
　　　.slideToggleEx(8,1000,"swing",function(){alert("18 の連続アニメが完了しました")});
　});
　// 起終点をボックス中心とするアニメ起動
　$("#btn2_727").click(
　　function(){
	　$box.slideToggleEx(0,1000,"easeInOutQuint");
	}
　);

　// 起終線をボックス左辺とするアニメ起動
　$("#btn3_727").click(
　　function(){
	　$box.slideToggleEx(8,1000,"easeInOutSine");
	}
　);

　// 起終点をボックス右下端とするアニメ起動
　$("#btn4_727").click(
　　function(){
	　$box.slideToggleEx(3,1000,"easeInOutQuart");
	}
　);

　// ボタン
　$("button")
　　.mousedown(function(){$(this).css({backgroundColor:"lightgreen"})})
　　.mouseup(function(){$(this).blur().css({backgroundColor:""})})
　　.hover(function(){
　　　　$(this).css({backgroundColor:"pink"});
　　　},function(){
　　　　$(this).css({backgroundColor:""});
　　})
　　.blur();

// regist click Event to fire slideToggleEx() for nextBox
// button の次にあるブロックを slideToggleEx の操作対象とするための一般的コード
 	var duration=1000, easing=null,fn=function(){}, clk={};
	function func(i){
		$.each(clk[i],function(){
			var $target={};
			$target[i] = $(this).css("display")=="block" ? $(this).next() : $(this).parent().next();
			if ($target[i].length) {
				$(this).click(function(){
					if (jQuery.browser.msie)
						var k = i==2 && 1 || i==3 && 4 || i==6 && 8 || i;
					else k = i;
					$target[i].slideToggleEx(k, duration, easing, fn);
					$(this).blur();
				});
			}
		});
	}
	for (var i=0; i<9; i++){
		clk[i] = $(".fireSlideToggleEx-" + i);
	  	if (!clk[i].length) continue;
		func(i);
		clk[i].hover(
			function(){$(this).css({backgroundColor:"pink"})},
			function(){$(this).css({backgroundColor:""})}
		)
		.mousedown(function(){$(this).css('background-color','palegreen')})
	}
});
//--></script>

プラグイン slideToggleEx() に係るスタイスシートと Javascript コード

直下のボタンには No 2 の slideToggleEx 、つまり右上端部からのスライドダウン/アップを仕込みました。最初は縦スクロールバーがないので、右上端部からの起終点も簡単に実行できると思いましたが、幅を明示的に指定して初めて思い通りに作動しました。

但し、またしても IE で障害が出ました。右上端部への隠蔽が起動せず、何故かスクロールバーが消えてしまうだけで他には何も起こりませんでした。仕方なく IE の場合のみ No1 つまり左上端部を起終点とするようにコーディングし直しました。

■ スタイルシート
<style type="text/css"><!--
　#animArea_727 {
　　position :relative; z-index:1; margin:1em auto; top:0px;left:0px;font-size:16px;color:black;
　　width:650px;height:300px;background-color:cornsilk;border:dotted 2px goldenrod;
　}
　#animArea_727 > div {
　　position: absolute; z-index:2; top:50px; left: 170px;
　　width:336px; height:186px; background-color:brown;
　}
　#box1_727 { /* 敢えて position 指定は行っていません。*/
　　margin:10px 10px 10px 10px;width:300px; height:150px;
　　background-color:royalblue; border:ridge 8px palegoldenrod;
　}
　button {overflow:visible;padding:2px;}
--></style>

▲ToTop

直下のボタンには No 7 の slideToggleEx 、つまり下辺からのスライドアップ（ 表示する場合 ）/ダウン（ 隠蔽する場合 ）を仕込みました。スライドが下から始まると独特の雰囲気になります。

■プラグイン slideToggleEx() メソッドコード
<script type="text/javascript">//<!--
// top と left をアニメ対象プロパティにする position relative バージョン
(function($){ // jQuery plugin : slideToggleEx() Release at 2009.8.21, verup 2009.9.9
var ver="not absolute but relative animation on position relative";
$.fn.slideToggleEx = function( type, duration, easing, fn ){
　var $target=this;
　var o = $.extend({},$.fn.slideToggleEx.opts);
　// 初めてそのインスタンスから呼ばれたか、インスタンスが変わった場合のみ
　if(!o.target || o.target[0]!==$target[0]) {
　　$.extend(o,{
　　　orig : o, // backup しておく
　　　target : $target, // 起動インスタンスを記録する
　　　oH : $target.outerHeight() + parseInt($target.css("margin-top"))
　　　　+ parseInt($target.css("margin-bottom")), // インスタンスの第一要素の margin 辺迄の高さを測る
　　　oW : $target.outerWidth() + parseInt($target.css("margin-left"))
　　　　+ parseInt($target.css("margin-right")), // インスタンスの第一要素の margin 辺迄の幅を測る
　　　odd : false
　　});
　　// opts オブジェクトに上で得た o オブジェクトを併合し、Ex メソッドが終わっても情報を保存する
　　$.extend($.fn.slideToggleEx.opts,o);
　　// インスタンスの要素の position 指定を確認し、必要な指定を行う。
　　if ($target.css("position") ==="static") $target.css({position:"relative",top:"0",left:"0"});
　}
　// 起動回数が偶数か奇数かを記録する。連続起動の際にはこれによって hide メソッドを起動するのか、
　// showメソッドを起動するのかを判断する。
　o.odd = $.fn.slideToggleEx.opts.odd = !$.fn.slideToggleEx.opts.odd;
　o.hidden = $target.is(":hidden"); // 要素が隠れているかどうか判定する
　o.duration = duration || o.duration; // duration が オブジェクトの場合も含めて対応
　// 以下の 2 つは、duration がオブジェクトの時には空文字を代入する。
　o.easing = typeof duration !=="object" ? (easing || o.easing) : "";
　o.complete = typeof duration !=="object" ? ($.isFunction(fn) && fn || o.complete) : "";

　function makeAnimCSS(type,showhide){ // アニメCSSプロパティを作成する関数
　　var type = new Number(type);
　　var plmn = showhide ? "-=" : "+="; // showhide == true → "-="
　　return type==0 ? {top: plmn + o.oH/2 +"px", left: plmn + o.oW/2 +"px"} : // center
　　type==1 ? {top: plmn + 0, left: plmn + 0} : // 左上端
　　type==2 ? {top: plmn + 0, left: plmn + o.oW +"px"} : // 右上端
　　type==3 ? {top: plmn + o.oH +"px", left: plmn + o.oW +"px"} : // 右下端
　　type==4 ? {top: plmn + o.oH +"px", left: plmn + 0} : // 左下端
　　type==5 ? {top: plmn + 0, left: plmn + 0} : // 上辺
　　type==6 ? {top: plmn + 0, left: plmn + o.oW +"px"} :// 右辺
　　type==7 ? {top: plmn + o.oH +"px", left: plmn + 0} :// 下辺
　　type==8 ? {top: plmn + 0, left:plmn + 0} : {top:plmn + 0, left:plmn + 0} ;// 左辺
　}

　if (new Number(type) > 8) // エラー対処
　　(function(){
　　　alert("第 1 引数は 0〜8 だけが指定できます。\nやり直してください。\n"+"slideToggleEx( 0〜8, 継続時間, easing関数 )"); return;
　　})();
　else {
　　var obj = (!o.odd || o.hidden) 
　　　? makeAnimCSS(type,true)  // 偶数回目の起動か、または要素が隠蔽されている時の CSS 作成
　　　: makeAnimCSS(type,false); // 奇数回目の起動か、要素が表示されている時の CSS 作成
　　$.extend( obj, // top と left だけのCSSオブジェクトに幅と高さ関係値も追加
　　 　( type==5 || type==7 ) ? {} : o.animWidth, // 上辺か下辺の時には幅方向CSSは対象外
　 　　( type==6 || type==8 ) ? {} : o.animHeight, // 右辺か左辺の時には高さ方向CSSは対象外
　　 　{opacity:"toggle"} ); // 透明度もアニメ対象プロパティとする
　　return this.animate(obj, o.duration, o.easing, o.complete); // アニメ起動
　}
}; // End of $.fn.slideToggleEx
// default 値設定と記憶用プロパティとしての機能のために
$.fn.slideToggleEx.opts = {
　duration:1000, easing:null, complete:function(){},
　animHeight : {
　　height:"toggle", marginTop:"toggle", marginBottom:"toggle", paddigTop:"toggle",
　　paddingBottom:"toggle", borderTopWidth:"toggle", borderBottomWidth:"toggle"
　}, animWidth : {
　　width:"toggle", marginLeft:"toggle", marginRight:"toggle", paddigLeft:"toggle",
　　paddingRight:"toggle", borderLeftWidth:"toggle", borderRightWidth:"toggle"
　}
};
})(jQuery);
//--></script>

▲ToTop

FC2ブックマークに追加

jquery.js におけるアニメーションコードの解読 ( 9 )

これまで 8 回に亘って jquery.js のアニメーションコードを解読してきました。自らの理解を深めるために、また閲覧者により関心を抱いて戴くためにも、いくつかのサンプルアニメーションも作成し、その解説もおこなってきました。

そしてついに、このエントリイをもって jquery.js のアニメーションコードの全ての解読を終えることになります。既に高い山は登り終えているので、残されたメソッドは比較的簡単なものばかりです。

jQuery().slideDown() メソッド

引数：speed、callback

返値：jQueryインスタンス

機能：要素の幅を一定に保ちつつ、高さを 0 から徐々に所定の高さまで変化させながら要素を表示します。

第 1 引数に高さに関わる各種の CSS プロパティ値を全て "show" に設定した CSS オブジェクトを、第 2 引数に speed を、第 3 引数に callback を設定して、animate メソッドを起動し、その返値を返します。

このメソッドは具体的には次のように定義されます。
 jQuery.fn.slideDown = function(speed,callback){
　　return this.animate({
 　　　height:"show", marginTop:"show", marginBottom:"show",
 　　　paddingTop:"show", paddingBottom:"show"
 　},speed,callback)
 } //（#3954〜3964より）

slideDown メソッドのコード進行を具体的に跡付けると次のようになります。

  1. 高さに関わる各 CSS プロパティ値を全て "show" に設定した CSS オブジェクトを第 1 引数とすることにより、animate メソッドからそれらの各 CSS プロパティ毎に、当該 CSS プロパティ名称を引数として e.show(prop) メソッドが起動されます。（#3892-3896）
  2. 各プロパティ毎に起動される e.show(prop) メソッドは、プロパティが対象ノードのマージン上下、ボーダー上下、又はパッディング上下値の場合には初期値を 0 に設定し、それが要素高さの場合には 1 に設定します。また e.cur() メソッドを呼び出して、各々の要素属性値、styleオブジェクトのプロパティ値または算出スタイル値を終了値に設定します。こうして初期値と終了値を設定してから、各プロパティ毎に e.custom() メソッドを実行します。
  3. e.show() メソッドから起動された e.custom() メソッドは、e オブジェクトのプロパティに初期値、終了値、現在時刻などを格納してから、当該 CSS プロパティに対して、今度は e.step() メソッドを起動します。
  4. e.custom() メソッドから起動された e.step() メソッドは、その時迄の経過時間が duration 時間を下回っている場合には、指定された easing 関数があればそれを使い、なければ swing 関数を使って、jQuery.easing() メソッドを起動します。
  5. easing メソッドは、経過時間と継続時間を変数とする所定の easing 関数により、0 から 1 の間の数値を返す関数で、この値が得られたらば、次に easing 関数による値と、初期値と終了値の差などからその時点のプロパティ値を算出します。そしてこの当該 CSS プロパティの値を、e.now プロパティに代入します。
  6. こうして当該時点の当該プロパティの CSS 値を取得した後、e.update() メソッドを起動します。
  7. update メソッドは、当該要素に style オブジェクトがあって、かつ当該プロパティ値が null 値ではないときには、当該 style オブジェクトの当該プロパティに、e.now の値を単位付きで代入します。
    他方、当該要素に style オブジェクトがないか、それがあっても当該プロパティ値が null だったら、当該要素の当該属性に e.now の値を代入します。（#4020）
    その後、処理対象プロパティが height で当該要素に style オブジェクトが存在すれば、その display プロパティを block とし、style オブジェクトがなければ何もしません。
  8. こうして高さに係る style オブジェクトの各 CSS 値または要素属性に e.now を与えられた当該要素は、ブラウザによりその e.now 値に従って画面に表示されます。
  9. 以上の 3. 〜 7. までの、一部にクラスメソッドを含む、e インスタンスオブジェクトに属するメソッドの連続実行（ e.show → e.custom → e.step → $.easing → e.update ） により、当該要素の当該プロパティの、その時の値を style オブジェクトか要素のタグ属性に代入してから、e.show メソッド実行過程の最後において、show() インスタンスメソッドが引数なしで起動されます。（#4080）
  10. しかし、既に 7. において 要素属性に e.now 値が代入されるか、elem.style.display 値が "block" となっているので、この時点で表示行為は終わっています。
  11. では、何故引数なしで show() インスタンスメソッドを起動する必要があるのでしょうか。
    この疑問を質すにはこのメソッドが、jQuery.data() クラスメソッドを使用して、インスタンスの各要素に elem.style.display プロパティ値を関連づけることを思い出す必要があります。つまり、このメソッドは単に画面に要素を表示するだけではなく、その要素が直前に表示済みか、隠蔽されているかを記録する機能を有しています。ここで show() インスタンスメソッドを起動する目的は、この「履歴情報」を設定し、あるいは確認する事にあります。
  12. 具体的に言えば、ここで起動される show() メソッドにより、display 値が block であることが当該要素への紐付け行為（ $.data() メソッドの実行）によって「登録され」、あるいは登録済みであることが確認されます。

▲ToTop

jQuery().sideUp()

引数：speed、callback

返値：jQueryインスタンス

機能：要素の幅を一定に保ちつつ、高さを所定の高さから 0 まで変化させながら要素を隠蔽します。

このメソッドは具体的には次のように定義されます。
 jQuery.fn.slideUp = function(speed,callback){
　　return this.animate({
 　　　height:"hide", marginTop:"hide", marginBottom:"hide",
 　　　paddingTop:"hide", paddingBottom:"hide" 　},speed,callback)
 } //（#3954〜3964より）

このメソッドは、高さに関わる各種の CSS プロパティ値を全て "hide" に設定したCSSオブジェクトを第１引数に、speed を第２引数に、そして callback を第３引数にして animate メソッドを起動し、その返値を返します。言うまでもなく、jQuery().slideDown() メソッドの逆のことを行うメソッドです。

e.hide() を起動することにより、高さに係る各種 CSS スタイルプロパティのカレントスタイル値を初期値をとし、最終値をゼロに設定してアニメーションを行います。

具体的なコード進行は slideDown と酷似しますが、e.show()メソッドよりも、e.hide()メソッドの方が、また show()インスタンスメソッドよりも hide() インスタンスメソッドの方が、共にコード文字数は少なく、単なる対照的な関係ではありません。

  1. 高さに関わる各 CSS プロパティ値を全て "hide" に設定したCSSオブジェクトを第1引数とすることにより、animate メソッドからそれらの各 CSS プロパティ毎に、CSS プロパティ名称を引数として e.hide(prop) メソッドが起動されます。（#3892-3896）
  2. 各プロパティ毎に起動される e.hide(prop) メソッドは、当該要素の style オブジェクトの当該プロパティ値を this.options.orig[this.prop] に代入してから、高さに係る当該 CSS プロパティのカレントスタイル値を初期値に設定し、終了値をゼロに設定して、各プロパティ毎に e.custom() メソッドを実行します。
  3. e.hide() メソッド内で起動された e.custom() メソッドは、アニメーションの各種条件を設定するためのものです。
  4. e オブジェクトに初期値や終了値、現在時刻などをプロパティとして格納してから、当該 CSS プロパティに対して、今度は e.step() メソッドを起動します。
  5. e.custom() メソッドから起動された e.step() メソッドは、custom メソッドで設定された諸条件値を使ってアニメーションを「刻みます」。つまり、時間経過と共に変動する CSS 値を経過時間に即して設定します。
  6. その時迄の経過時間が指定された duration 時間を下回っている場合には、指定された easing 関数があればそれを使って、なければ swing 関数を使って、jQuery.easing() メソッドを起動します。
  7. easing メソッドは、経過時間と継続時間を変数とする所定の easing 関数により、0 から 1 の間の数値を返す関数で、この値と初期値と終了値の差などから、その時点のプロパティ値を算出します。そしてこの当該 CSS プロパティの値を、e.now プロパティに代入します。
  8. こうして当該時点の当該プロパティのCSS値を取得してから、表示を制御する e.update() メソッドを起動します。
  9. update メソッドは、まさに表示の「更新」を行うものです。
  10. 当該要素に style オブジェクトがあって、かつ当該プロパティが null 値ではないときには、当該 style オブジェクトの当該プロパティに、e.now の値を単位付きで代入します。他方、当該要素に style オブジェクトがないか、それがあっても当該プロパティが null だったら、当該要素の当該属性値に e.now の値を代入します。その後、処理対象プロパティが width か height だったら、当該要素の style オブジェクトの display プロパティを block とします。block により、幅や高さは初期値から次第にゼロに近づく e.now 値に応じて、表示サイズが小さくなっていき、最終的にはゼロに到達して当該要素は全く表示されなくなります。
  11. 3 〜 7 までの、一部にクラスメソッドを含む e オブジェクトに属する一連のメソッド連続実行（ e.show → e.custom → e.step → $.easing → e.update ）により、当該要素の当該プロパティの、その時の値をstyleオブジェクトか要素のタグ属性に代入するわけです。

▲ToTop

jQuery().slideToggle()

引数：speed、callback

返値：jQueryインスタンス

機能：e.show() 又は e.hide() メソッドを交互に起動するメソッドです。対象としたタグ要素が表示されていれば e.hide()メソッドを起動して隠蔽し、隠蔽されていれば e.show() メソッドを起動して表示します。

jQuery().fadeIn()

引数：speed、callback

返値：jQueryインスタンス

機能：CSS オブジェクト {opacity:"show"} を第１引数に、speed を第２引数に、callback を第３引数にして animate メソッドを起動し、その返値を返します。これにより要素が透明から次第に不透明になっていって、表示されるアニメが実現されます。

このメソッドは具体的には次のように定義されます。
 jQuery.fn.fadeIn = function(speed,callback){
　　return this.animate({opacity:"show"},speed,callback)
 }
  1. 第１引数により、animate メソッド内から e.show()メソッドが起動され、opacityスタイル値の初期値を 0 に、終了値を現在値に設定して、e.custom メソッドを作動させます。
  2. e.custom メソッド→ e.step メソッド→ e.update メソッドの連鎖起動を通じて、不透明度アニメーションの初期値などの設定とその時点における値設定を行ってから、e.update メソッド内から e インスタンスを引数にして、jQuery.fx.step[opacity] クラスプロパティメソッドが起動されます。
  3. jQuery.fx.step.opacity メソッドにより、当該要素の不透明度が step メソッド内で設定された e.now 値に設定されます。

jQuery().fadeOut()

引数：speed、callback

返値：jQueryインスタンス

機能：fadeIn メソッドとの違いは animate メソッド第 1 引数の opacity プロパティ値が hide になることだけです。これにより要素が不透明から次第に透明化していき最後には完全透明になって、表示が消えます。

このメソッドは具体的には次のように定義されます。
 jQuery.fn.fadeIn = function(speed,callback){
　　return this.animate({opacity:"hide"},speed,callback)
 }

▲ToTop

jQuery().stop(clearQueue,gotoEnd) メソッド

引数：2 つの引数は共に boolean 型。最初の引数を true に設定すると、アニメ待ち行列配列を空にすることによって、次以降に登録されているアニメを全て登録から削除します。2 番目の引数を true に指定すると、全てのアニメーションの全ての step メソッドを格納している jQuey.timers 配列から、今まさにアニメを停止しようとしているタグ要素に関わる step メソッドを特定し、当該要素の当該アニメを、その step メソッドを最後に終了させます。

返値：jQuery インスタンス

機能：このメソッドは登録されているアニメーションを削除したり、進行中のアニメーションを停止させます。

引数に何も指定しないと、単に現在動いているアニメーションを停止させます。同じ要素に登録されている次のアニメーションは停止されませんし、停止指示の前の時点で動き出していて未だ終わっていない e.step メソッドも停止されません。

3927:　stop: function(clearQueue, gotoEnd){
3928:　　var timers = jQuery.timers;
3929:
3930:　　if (clearQueue) // clearQueue が true ならば
3931:　　　this.queue([]); // 空配列を queue メソッドの引数として、待ち行列を空にし
3932:　　　// jQuery インスタンスに登録されているアニメーションを削除する。
3933:　　this.each(function(){ // インスタンスの要素毎に巡回処理
3934:　　　// go in reverse order so anything added to the queue during the loop is ignored
3935:　　　for ( var i = timers.length - 1; i >= 0; i-- )
　　　　　　 // timers 配列の要素は custom メソッド内の #4046 行で定義されている
　　　　　　 // t 関数であり、これは e.step メソッドを起動させアニメを刻む役割を果たす。
　　　　　　 // この関数には animate メソッドが起動された全てのタグ要素の、全てのアニメーションの
　　　　　　 // 各 CSS プロパティ毎の e.step メソッドが登録されている。
　　　　　　 // それを逆順に巡回走査して、それが現在対象としている要素のメソッドだったら
3936:　　　　if ( timers[i].elem == this ) {
3937:　　　　　if (gotoEnd) // gotoEnd が true に指定されていれば
3938:　　　　　　// force the next step to be the last
3939:　　　　　　timers[i](true); // 次に起動する e.step メソッドを最後にそのアニメを終わる。
3940:　　　　　timers.splice(i, 1); // timers 配列の i 番目を削除。実行中の e.step メソッドを削除する。
3941:　　　　}
3942:　　}); // 巡回処理終わり
3943:
3944:　　// start the next in the queue if the last step wasn't forced
　　　　 // gotoEnd が 未定義か false ならば当該要素に登録されている次のアニメ関数を実行する。
3945:　　if (!gotoEnd)
3946:　　　this.dequeue();
3947:
3948:　　return this;
3949:　}

jQuery.easing() クラスメソッド

引数：easing 関数名を文字列形式で指定します

返値：easing 関数による産出値

機能：初期値、アニメ継続時間、経過時間などから計算が行われますが、単純に言えば、様々な代数式に、経過時間割合（ この割合のことを「 動作ステータス 」というらしい ）を変数として代入して値が算出されます。

留意すべき点は、経過した時間そのものではなく、そのアニメ継続時間に対するその割合が変数となることでしょうか。

なお以前にも紹介しましたが、 easing 関数の極めて分かりやすい例示として、以下のサイトが非常に参考になります。「その Easing の各々の動きの違いを示したサイトとして興味深いのは、flash ムービーですが、 easing_demo が実に分かりやすく有益です。これによりそれぞれの Easing がどんな挙動をするのか一目瞭然に理解できます。easing 関数内の代数式がグラフ化されていることも非常に有益です。」( jQuery プラグインとしてアニメーションポップアップ ： animatedPopup を自作した。 )

FC2ブックマークに追加

jquery.js におけるアニメーションコードの解読 ( 8 )

アニメーションの進行途中の情報を見るサンプル

このエントリイでは前エントリイに続いてサンプルを掲載します。今回のサンプルでは Web サイトでは余り見かけない「 アニメ−ションが進行しているその途中の情報 」を取り上げます。

これまでの 「 jquery.js におけるアニメーションコードの解読 (1) 〜 (6) 」 からも分かるとおり、アニメーションが実現されるコードの進行過程は大変複雑で、様々なプロパティとメソッドが駆使されて 「 動き 」 が演出されています。

そしてアニメを扱ったサイトの多くは、アニメそのもの多様性・独自性・ユニークさを競い合っていても、アニメ−ション進行過程における情報を可視化したものは余り見受けません。

そこで、実際にアニメーションを起こしながら、その進行過程における諸情報を取りだすサンプルを作ってみました。

アニメ途中の諸情報とは何か

それはずばり jQuery.fx コンストラクタの e インスタンスが保持している情報です。

e インスタンスは既に見たように模式図的に示せば以下のような盛りだくさんの情報を内包しています。

■ jQuery.fx コンストラクタの e インスタンス
 e = {
　elem：elem,// 第 1 引数
　prop:propName, // 第 3 引数
　options: {
　　queue:false || true, step:function(){・・・}, // これらはユーザーが指定する。
　　old,complete,easing,duration,display,overflow,// animateメソッドから引き継がれる。
　　curAnim, //animateメソッドの第一引数である prop オブジェクトが格納される。
　　orig:{prop},
　　show:true || false || undefined, hide:true || false || undefined
　},
　startTime, start, end, unit, now, pos, state,
　// メソッド
　cur(), custuom(), step(), update(), show(), hide()
}

■ jQuery.fx コンストラクタのクラスプロパティ
 jQuery.fx.speeds = {"slow":600, "fast":200, _default:400}
 jQuery.fx.step = {opacity, _default}

▲ToTop

「 アニメ進行過程 」における当該アニメの諸情報は、e.step メソッドがアニメ対象要素（ 以下 A ）のアニメ対象プロパティ（ 以下 props ）毎に、ミリ秒単位で静止画を繰り返し描画する過程において、刻々と変化します。

諸情報は e インスタンスオブジェクトのプロパティ【 startTime, start, end, unit, now, pos, state 】に、何百回となく上書きが繰り返されます。

このエントリイではこれらの値を取りだしてみます。

もちろんその全てを取りだしていたら数千,数万のデータとなるため、ここではアニメ継続時間 （ duration ）の 15％、30％、50％、75％及び 100％の時間が経過した 5 つの時点に絞って、それぞれの経過時点におけるプロパティ値を取り出すこととします。

なお、折角閲覧して戴くので、閲覧者が操作にある程度関われるよう配慮しました。

第 1 に props（アニメ対象プロパティ）を選択できるように、第 2 に、アニメで使用する easing 関数を多数用意し、これも閲覧者が選択できるようにしました。

アニメ途中経過情報を表示するサンプル

以下がサンプルです。ボックスが 6 つ。左から順にアニメ素材としたボックス、アニメ開始後の時間が、設定済みの継続時間の 15 ％進行した段階で止まるボックス、以下 30％、50％、75％でそれぞれ停止するボックス、最後が通常通りアニメーションされるボックスです。なお、アニメ継続時間は、進行過程をゆっくり見せるために一律に 4 秒としました。

4 つの進行時間が異なるアニメの諸情報 （ 各 A の props。具体的には開始時刻, 開始値, 終了値, 経過割合, 値の変化度合, 停止値, 経過時間 ） は下の方に配置した 4 つの表内に、アニメが停止したその瞬間に描画されます。

アニメ
素材
15 ％
30 ％
50 ％
75 ％
100％

適用 easing 選択

アニメ継続時間の選択　

アニメ対象プロパティの選択

  
  

▲ToTop

途中停止アニメサンプルの使い方
  1. まず、easing 関数、アニメ継続時間（所要時間と言っても良い）およびアニメーションの対象プロパティを選択します。
  2. 「 Do 隠蔽アニメ 」 ボタンをクリックします。

    これで隠蔽アニメーションが始まり、各々のボックスアニメが指定した途中の段階で停止します。同時にその瞬間に、停止時のアニメに係る諸情報が下の表に出力されます。

    この情報によって jquery.js が処理しているアニメ情報の具体的な内容を知ることが出来ます。

  3. 「 最後まで動かす 」 ボタンをクリックします。これで途中で停止していたアニメが再開されて最後まで進行します。最後まで進行するとアニメ素材以外のボックスは全て隠蔽された状態になります。

    なお、アニメ再開時の諸情報は表には出力されません。

  4. 「 Do 表示アニメ 」 ボタンをクリックします。これによって今度は表示アニメーションが始まります。ここでも途中で停止し、その時の情報が表に上書き出力されます。
  5. 最後に再びアニメを再開させます。「 最後まで動かす 」 ボタンをクリックすれば、表示アニメーションが最後まで進行して、一連の 「 停止─再開 」サンプルアニメーションが終了します。 この段階で初期の 6 つのボックス表示状態に戻ります。

言うまでもなく、easing 関数を変え、継続時間を変え、あるいはアニメ対象プロパティを変えて、何回でも途中停止アニメーションサンプルを起動させることが出来ます。

なお、ボタン、セレクトボックス及びチェックボックスは、アニメーション進行中や途中停止状態の時には使えないように disabled 属性を調整すると共に、カバーボックスをアニメートさせ、使用可能/不能が視覚的にも一目瞭然となるように工夫しました。

所定の継続時間（4000ミリ秒に設定）の 15 ％ 経過した時点の諸情報

sT:開始時刻, sV:開始値, eV:終了値, s:経過割合,pos:変化度合,
nV:停止値, eT:経過時間, nV = sV + ( eV -sV ) * pos

propertysTsVeV sposnVeT
marginTop
marginRight
marginBottom
marginLeft
borderTopWidth
borderRightWidth
borderBottomWidth
borderLeftWidth
paddingTop
paddingRight
paddingBottom
paddingLeft
width
height
opacity
fontSize
所定の継続時間（4000ミリ秒に設定）の 30 ％ 経過した時点の諸情報

sT:開始時刻, sV:開始値, eV:終了値, s:経過割合,pos:変化度合,
nV:停止値, eT:経過時間, nV = sV + ( eV -sV ) * pos

propertysTsVeV sposnVeT
marginTop
marginRight
marginBottom
marginLeft
borderTopWidth
borderRightWidth
borderBottomWidth
borderLeftWidth
paddingTop
paddingRight
paddingBottom
paddingLeft
width
height
opacity
fontSize
所定の継続時間（4000ミリ秒に設定）の 50 ％ 経過した時点の諸情報

sT:開始時刻, sV:開始値, eV:終了値, s:経過割合,pos:変化度合,
nV:停止値, eT:経過時間, nV = sV + ( eV -sV ) * pos

propertysTsVeV sposnVeT
marginTop
marginRight
marginBottom
marginLeft
borderTopWidth
borderRightWidth
borderBottomWidth
borderLeftWidth
paddingTop
paddingRight
paddingBottom
paddingLeft
width
height
opacity
fontSize
所定の継続時間（4000ミリ秒に設定）の 75 ％ 経過した時点の諸情報

sT:開始時刻, sV:開始値, eV:終了値, s:経過割合,pos:変化度合,
nV:停止値, eT:経過時間, nV = sV + ( eV -sV ) * pos

propertysTsVeV sposnVeT
marginTop
marginRight
marginBottom
marginLeft
borderTopWidth
borderRightWidth
borderBottomWidth
borderLeftWidth
paddingTop
paddingRight
paddingBottom
paddingLeft
width
height
opacity
fontSize

▲ToTop

アニメ途中経過情報を表示するサンプルの要点

アニメ−ション進行過程のあらまし（再掲）

jquery.js の animate メソッドはアニメーション動作開始前に e インスタンスを作成し、そのプロパティ上にアニメーションに係る多数の情報を保持し続け、上書きを繰り返してアニメを実現しています。そのことはアニメーションに関するシリーズエントリイの最初（ jquery.js におけるアニメーションコードの解読 ( 1 ) ）でも触れました。

その e インスタンスには、数種類のメソッド （ cur, custuom, step, update, show, hide ） も形成され、これらのメソッドが有機的に連携して 「 動き 」 を演出します。animate メソッド内でのこれらのメソッド連携を改めて跡付けてみると次のようになっています。

  1. 最初に animate メソッドの第 1 引数内で指定されたアニメーション終了値を処理します。

    その指定値が show、hide または toggle の時には e.show 又は e.hide メソッドが起動されて、その中で必要な処理を行ってから、e.custum メソッドが呼び出されます。

    指定された終了値がそれらの文字列ではない場合には、その値をanimateメソッド内で評価処理してから（ この時に現在値を計算するメソッドが e.cur です ）、やはり、e.custum メソッドが呼び出されます。

    こうして animate メソッド内の e インスタンスサブルーチンメソッド連鎖は必ず e.custom メソッドから始まります。

  2. e.custum メソッド内ではアニメ開始時刻を記録し、アニメーションの開始値を取得した後に、e.step メソッドを呼び出します。
  3. e.step は呼び出された時刻を記録し、その時点におけるアニメプロパティの現在値を算出します。この時に現在値を計算するメソッドが e.cur です。
  4. その時点の現在値が決まれば後はブラウザ上に描くだけです。それを e.update メソッドが行います。
  5. この過程が何百回、何千回となく繰り返されて 「 動き 」 が描かれます。
アニメ途中で何かを実行させるメソッド： e.options.step

さて、アニメーション実行中にユーザーが出来ることは、ブラウザを停止する、パソコンの電源を切る等の外的作用の他には、(1) アニメが終わるのを待つか、(2) e.options.step メソッドをあらかじめ指定しておき、アニメーション進行途中でそれを実行させるか、この 2 択 しかありません。アニメを途中で停止させる指示を与える場合も、e.options.step メソッド内に $().stop メソッドをあらかじめ仕込んでおくことになります。

ここでは (2) の途中で何かをさせるメソッド e.options.step の指定方法について言及します。

e.options.step の指定について（jquery.js #4018 参照）

このメソッドは e.update メソッドの冒頭で起動されます。アニメ対象プロパティ毎に、数ミリ秒毎に繰り返し実行される e インスタンスメソッドチェーン内において、何百回、何千回と描画が繰り返されますが、その描画直前毎に、e.options.step メソッドが実行されます。

この e.options.step の引数は、アニメプロパティ現在値と e インスタンスの 2 つで、起動元の this.elem と併せて jquery.js #4018 で無条件に指定されます。起動元はアニメーション対象要素タグに指定されますから、e.options.step メソッド内において this キーワードを使った場合、その参照先は対象要素タグとなります。

また、 引数に e インスタンスがあると言うことはアニメに係る全ての情報に、 e.options.step メソッドからアクセスできることを意味しています。この点は極めて重要なポイントです。

以上の実行タイミングと引数を踏まえた約 200 行のコードによって、このエントリイのサンプルを実現しました。具体的な方法は、後に掲載したコードの通りですが、要点を記しておきます。

サンプルコードの要点

ユーザーフレンドリイに!

これまでは簡単に言えば「 面倒なので 」（苦笑）、form 要素の使用を出来るだけ避けてきました。せいぜいボタンを単独で多用してきた程度で、リストボックス、コンボボックス、チェックボックスなどのブラウザ閲覧者が操作し、その結果を反映させられるツールは殆ど使ってきませんでした。

その意味では今回のチャレンジは、step メソッドの使い勝手を試してみる以外に、form 要素を駆使するコーディングに真正面から取り組んだ点が大きな特徴であり、またそれがハードルともなりました。

ここで配置した form 要素の使いやすさについては閲覧者の批判を甘受するしかありませんが、アニメ中に form 要素を変更されなくするための、思いつきで作った二重の処理（ disabled 属性の処理と隠蔽カバーをアニメで被せたこと）には、それなりに満足しています。

なお、このカバーアニメーションにおいてもユーザー指定の easing 関数を使うように設計してあります。

途中停止のための動作ステータスキャッチ

options.step メソッドにおけるアニメの途中停止は、動作ステータス ( e.state ) の操作により行いました。

プロパティ値の変動割合で行うことも可能ですが、この値は easing 関数によって増減する動的なものなので、時間経過によって途中の段階を捉える方が確実だと考えました。

e.state は 或る e.step メソッドの 「 呼び出し時迄の経過時間÷アニメ継続時間 」で定義されている、「 経過時間割合 」とでもよぶべきものですが、この値は決して数直線のような連続的な数値にはなりません。

当該要素の当該プロパティ毎に、繰り返し呼び出される e.step の呼び出し時迄の経過時間は必ず一定間隔が空くからです。ちょうど 15 ％過ぎた、そのタイミングの時に、偶々 e.step が呼び出されているという保証は全くありません。

このため 15 ％前後に一定の幅を持たせた 「 許容域 」を設定しないと、アニメ停止のタイミングが捉えられません。このため、if ( e.state > (( stopPoint - permitter )/100 ) && e.state < (( stopPoint + permitter )/100) ) と言う式によって、一定の許容域に収まるタイミングを捉えて、その瞬間にアニメを停止させるようにしました。stopPoint は 15 ％等の値、permitter は許容幅です。

諸情報の表における s 列がその許容域内で補足されたことを示す経過時間割合です。

しかも、許容幅はアニメ継続時間との関係で変動させる必要がありました。余り短時間の継続時間だと e.step の起動回数が少なくなるので、許容幅を広げないと「 その瞬間 」を捉えられないのです。こうして継続時間が長ければ許容幅は小さく、継続時間が短い場合には長くなるよう、動的に変動するようにしました。

4 つの機能を持たせたアニメ起動ボタン

出来るだけ簡単な操作になるよう、隠蔽アニメ起動、隠蔽アニメ停止後の再開、表示アニメ起動、表示アニメ停止後の再開───という一連の操作を全て 1 つのボタンだけで行うようにしました。

その結果コードは複雑にならざるを得ませんでした。4 回のそれぞれの操作の意味が全て異なるため、それぞれ毎に異なるコーディング他必要となるためです。これを click イベントの Toggle メソッド利用と、その中の 2 つの関数の起動回数（奇数回か偶数回か）によって 4 つに分けるようにしました。

IE 対策

今回もまた IE 対策を施さねばなりませんでした。W 3 C 準拠になったはずの IE 8 においてもまだ、準拠が不十分な点が残っているのでしょう。

具体的にはアニメーション対象プロパティとしてフォントサイズを指定した場合の対応です。Firefox の場合には全く問題がなかったのですが、フォントサイズをアニメ対象とした場合において、IE においては初期値のフォントサイズを指定しないと、アニメ前のフォントサイズを勝手に最大サイズ（ おそらく96 pt ）と解釈してしまうのです。

仕方なく、アニメ領域だけフォントサイズを指定せざるを得ませんでした。

Web サイト作成上、フォントサイズを固定的に指定することは推奨されていません。ユーザーがブラウザの拡大/縮小機能を使った場合に、フォントサイズが固定されているとフォントだけ拡大/縮小されないからです。ですから私の場合フォントサイズ指定は全く行ってこなかったのですが､今回の場合やむを得ず指定せざるを得ませんでした。

アニメ停止後再開時点における、開始値と終了値の操作に最も苦労しました

隠蔽アニメーションは開始時点のプロパティ値（ 開始値 ）を e.hide メソッド内で取得し、表示アニメは終了時点のプロパティ値（ 終了値 ）を e.show メソッド内で取得します。そして e.hide メソッドはアニメ対象要素の属性値や style 値を一切変化させません。だからこそ、e.show メソッドの終了値は、その直前に行われた e.hide メソッドの開始値に等しくなります。

ここに、開始値も終了値も共に、e.cur メソッドによって、アニメ対象タグの (1) 属性値や (2) style オブジェクト値、あるいは (3) 算出スタイル値から算出されます。

さて、停止後に再開されるアニメの初期値は、停止時点のプロパティ値となります。そして、停止時のプロパティ値は、既に動いた後なのですから、最初にアニメを起動した時のプロパティ値とは決して同一ではありません。

従って、アニメ対象プロパティを何も変更せず、単純に停止していたアニメを再開させると、再開後の最終値は当初の設定値と異なってしまいます。

例えばここのサンプルで言えば、15％で停止させたアニメを再開して隠蔽させ、その後最後まで表示させると、その表示サイズは 15％ で停止した時のサイズであって、決して当初の大きさまでは戻りません。

この問題をどうやって解決するか───この点こそ、今回のコーディングで最も頭を悩ませた箇所でした。

一旦 animate メソッドが起動してしまうと、その途中でアニメ対象プロパティをユーザーが直接変更することは、options.step メソッドを使ってアニメを進行途中で止めたとしても困難です。

何故ならば、アニメ対象プロパティは、既に animate メソッドによって作成済みの e インスタンスオブジェクト内の各プロパティに値が格納されてしまっていて、コードによって e インスタンスを操作することは出来ないからです。

出来ることは、e インスタンスのメソッドが作動する際に、style オブジェクト、要素属性又は算出スタイルから、各プロパティ値を算出することに着目して、要素の style オブジェクトの各プロパティ値や、定義できる属性であれば要素属性値を、次の animate メソッドが始まる前に、強制的に書き換えてしまい、それによって次の animate メソッドの開始値や最終値を前もって変更してしまうことだけです。

このことに気がついた結果、途中停止後に再開したアニメーションも、最初のアニメーションの開始値と終了値を参照するように強制的なコーディングを施して、やっとこのサンプルが完成したのでした。

▲ToTop

　#animArea_725 {
　　position: relative; width:620px; margin:1em auto; height:140px;
　　background-color:lavender;border:0;font-size:16px;
　}
　#box0_725, #box15_725, #box30_725, #box50_725, #box75_725, #box100_725 {
　　position:absolute; top:10px; width:64px; height:84px; padding:3px;margin:5px;
　　background-color:darkgreen; border:8px ridge bisque;
　}
　#box0_725 {
　　left:10px;
　}
　#box15_725 {
　　left:110px;
　}
　#box30_725 {
　　left:210px;
　}
　#box50_725 {
　　left:310px;
　}
　#box75_725 {
　　left:410px;
　}
　#box100_725 {
　　left:510px;
　}
　#formBlock {
　　position:relative; width:600px;height:220px;margin:1em auto; border:1px dotted aquamarine;
　　line-height:1.1em; clear:both;
　}
　#fm_725 {
　　position:absolute; z-index:2; width:170px; margin:1em;
　}
　#fm_725 p{
　　color:black;background:ivory;text-indent:-0.5em;text-align:center;line-height:1.2em;
　　width:170px;
　}
　#fm2_725 {
　　position:absolute;left:190px;margin:1em;
　　width:345px; padding:10px;color:black;background:ivory;
　　height:175px;
　}
　#submit_725 {margin:0.5em 1em 1em; padding:5px;border:2px solid royalblue;text-align:center;}
　#fm1shutter_725 {
　　position:relative; z-index:2; top:-176px;
　　width:170px; height:178px; background:teal; display:none;
　}
　#fm2shutter1_725 {
　　position:absolute; z-index:2; left:6px;top:8px;
　　width:350px; height:130px; background:teal; display:none;
　}
　#fm2shutter2_725 {
　　position:absolute; z-index:2; left:6px;top:142px;
　　width:350px; height:50px; background:teal; display:none;
　}
　input,button {overflow:visible; padding:2px;}
■ Javascript codes
(function(){
　var $fm2 = $("#fm2_725"), $chk = $(".chkbox"), $done = $("#go"),$initAnim = $("#initAnim_725"),
　　$box0=$("#box0_725"), $box1=$("#box15_725"), $box2=$("#box30_725"),
　　$box3=$("#box50_725"), $box4=$("#box75_725"), $box5=$("#box100_725"),
　　$t1=$("#table1_725 tr"), $t2=$("#table2_725 tr"),
　　$t3=$("#table3_725 tr"), $t4=$("#table4_725 tr"),
　　$shutter1=$("#fm1shutter_725"), $shutter2=$("#fm2shutter1_725"), $shutter3=$("#fm2shutter2_725"),
　　selEasing="swing", // 選択された easing 関数を入れる変数。既定値はswingとしておく
　　chkList=[], // 選択されたチェックボックスリスト
　　animProp=[], animaCSS, boxCSS={},initCSS=[], dur=4000, //既定値４秒;
　　permitter=0.9, // パーセント許容幅（既定値0.9）
　　odd = [false,false] , // 第 1 関数及び第 2 関数の起動回数が奇数かどうかを odd 配列に記録
　　ival, obj={},
　　fxAttrs = [
　　　["marginTop","marginRight","marginBottom","marginLeft"],
　　　["borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth"],["paddingTop","paddingRight","paddingBottom","paddingLeft"]
　　], 
　　attrs=[];

　// 全プロパティ名の単純なリスト配列作成
　for (var i=0; i<fxAttrs.length; i++)
　　for (var j=0; j<fxAttrs[i].length; j++)
　　　attrs.push(fxAttrs[i][j]);
　attrs = attrs.concat("width","height","opacity","fontSize");

　// easing リストから 選択された easing 関数を知る
　$("#sel_725").change(function(){
　　selEasing = $(this).val();
　});

　// アニメ継続時間コンボボックスから 選択された duration 値を dur 変数に代入する
　$("#fm2_725 select").change(function(){
　　dur = +$(this).val();
　　permitter = (dur >2000) ? 0.9 : (dur > 800) ? 3 : 4;// 許容値を継続時間毎に変化させる
　});

　// チェックボックスの既定値選択設定
　$("#defaultSelect_725").click(function(){
　　$("#fm2_725 input:checkbox").val(
　　　["margin","padding","width","height","opacity"]
　　);
　});
　// チェックボックス全選択設定
　$("#allSelect_725").click(function(){
　　$("#fm2_725 input:checkbox").val(
　　　["margin","border","padding","width","height","opacity","fontSize"]
　　);
　});

　// アニメ開始前の全てのCSSプロパティ値を initCSS 配列に記録する
　$.each([$box1,$box2,$box3,$box4],function(){
　　for (var j=0; j<attrs.length; j++)
　　　boxCSS[ attrs[j] ] = this.css( attrs[j] );
　　initCSS.push(boxCSS);
　});

　// アニメ用のCSSオブジェクト（ margin、borderWidth、padding ）を作成するmeta関数
　var makeCSS =function(i,type){
　　$.each( fxAttrs[i],function(){obj[this]=type;} ); return obj;
　}

　// チェックボックス情報を踏まえたアニメ用の CSS オブジェクト作成
　var make_animObj = function(type){
　　var retObj={}, mStr = chkList.join();
　　if (mStr.match("margin")) retObj = $.extend(retObj,makeCSS(0,type));
　　if (mStr.match("border")) retObj = $.extend(retObj,makeCSS(1,type));
　　if (mStr.match("paddin")) retObj = $.extend(retObj,makeCSS(2,type));
　　if (mStr.match("width")) retObj = $.extend(retObj,{width:type});
　　if (mStr.match("height")) retObj = $.extend(retObj,{height:type});
　　if (mStr.match("opacity")) retObj = $.extend(retObj,{opacity:type});
　　if (mStr.match("fontSize")) retObj = $.extend(retObj,{fontSize:type});
　　for (var p in retObj) animProp.push(p); // アニメ対象プロパティリストを animProp 配列に格納
　　return retObj;
　}

　// 一時停止時の情報を table に書き込む
　function printOut(o,box){
　　var startTime =o.startTime.toString();
　　var output=[
　　　startTime.substring(startTime.length-5,startTime.length), o.start, 
　　　Math.round(o.end*100)/100,
　　　Math.round(o.state*10000)/100+"%", Math.round(o.pos*10000)/100+"%",
　　　Math.round(o.now*10000)/10000, parseInt(dur * o.state)
　　];
　　for (var i=0;i<16;i++){
　　　if (attrs[i]==o.prop ){
　　　　for (var j=0; j<7; j++)
　　　　　box===$box1 ? $t1.eq(i+1).children().eq(j+1).text(output[j]) :
　　　　　box===$box2 ? $t2.eq(i+1).children().eq(j+1).text(output[j]) :
　　　　　box===$box3 ? $t3.eq(i+1).children().eq(j+1).text(output[j]) :
　　　　　box===$box4 ? $t4.eq(i+1).children().eq(j+1).text(output[j]) : null;
　　　}
　　}
　}
　// goAnim メソッドから呼び出されて一時停止時の情報を取得する
　function doStep(box,obj,stopPoint){
　　box.animate(obj,{
　　　step:function(){
　　　　if (stopPoint==100) return;
　　　　var e = arguments[1];
　　　　if (e.state > ((stopPoint-permitter)/100) && e.state < ((stopPoint+permitter)/100)){
　　　　　var o = $.extend({},e);
　　　　　if (o.prop === animProp[animProp.length-1]) {
　　　　　　box.stop();
　　　　　}
　　　　　printOut.call(null,o,box);
　　　　}
　　　},
　　　duration:dur, easing:selEasing
　　});
　}
　// type="toggle" で show/hide を循環させる
　function goAnima(type){
　　var stopTime =[];
　　stopTime =[15,30,50,75,100];
　　animaCSS = make_animObj(type);
　　$.each([$box1,$box2,$box3,$box4,$box5],function(i){
　　　doStep(this,animaCSS,stopTime[i]);
　　});
　}

　// アニメと対象画像の初期化
　$initAnim.click(function(){
　　$.each([$box1,$box2,$box3,$box4],function(i){
　　　this.stop(true,true);
　　　for (var j=0; j<attrs.length; j++){
　　　　$.attr(this.get(0).style, attrs[j] ,initCSS[i][attrs[j]]);
　　　}
　　});
　　$(this).blur();
　});

　 // select オプション・チェックボックス・コンボボックスの使用不能/可能を切り替える
　function elementsDisabled(type){
　　$("#fm_725 option").attr("disabled",type).get(0).disabled="disabled"; // easingリストボックス
　　$("#fm2_725 option").attr("disabled",type); // duration コンボボックス
　　$("#fm2_725 input:checkbox").attr("disabled",type); // プロプ選択ボックス
　　$("#defaultSelect_725").attr("disabled",type); // 既定選択ボタン
　　$("#allSelect_725").attr("disabled",type); // 全選択ボタン
　}

　 // チェックボックスのオンオフ状態をチェックし、
　 // チェックボックス・コンボボックス・セレクトリストを使用不能とする
　 function checkChkbox(){
　　chkList=[]; // 必ず初期化する必要がある
　　$("#fm2_725 input:checkbox:checked").map(function(){
　　　chkList.push( this.value );
　　}); // オンされたチェックボックスリストを配列 chkList に格納
　　if (!chkList.length) { // No check 時には警告を発し、アニメを起動させない。
　　　alert("アニメ対象プロパティを何か 1 つ以上指定してください");
　　　return;
　　}
　　elementsDisabled("disabled"); //全て使用不可とする
　}

　// 囲み内ボタンの使用可確認とフォーム要素のカバー不透明度設定
　$done.attr("disabled","");
　$initAnim.attr("disabled","");
　elementsDisabled("");　// 起動時には form elements を全て使用可能とする
　$.each([$shutter1,$shutter2,$shutter3],function(){
　　if (this.css("opacity")==1) this.css("opacity","0.5");
　});
　// 2 つの form 内の、2 つのボタンの使用可/不可状態の設定とシャッターアニメの起動設定
　function setForm(type,duration,easing){
　　$done.attr("disabled",type);
　　$initAnim.attr("disabled",type);
　　var disp = (type==="disabled") ? "show" : "hide";
　　if ( disp=="show" && odd[0] !== odd[1] || disp=="hide" && !odd[0] === !odd[1] ){
　　　　$shutter1.animate({width:disp,height:disp},duration,easing);
　　　　$shutter2.animate({width:disp,height:disp},duration,easing);
　　}
　　$shutter3.animate({width:disp,height:disp},duration,easing);
　}

　// アニメが動作中か否かを確認し、状態に応じて form 要素の使用不可/可を切り替える
　function isbusy(){
　　ival =setInterval(function(){
　　　if ( $box1.is(":animated") || $box2.is(":animated") || $box3.is(":animated") || $box4.is(":animated") ) {
　　　　setForm("disabled","slow",selEasing);
　　　} else {
　　　　setForm("","slow",selEasing);
　　　　clearInterval(ival);
　　　　ival=undefined;
　　　}
　　},20);
　}

　$done.toggle(function(){ // click toggle
　　odd[0]=!odd[0]; // 奇数か偶数かを反転させる
　　isbusy();
　　checkChkbox();
　　goAnima("toggle");
　　$done.attr("value","最後まで動かす");
　　$(this).blur();
　},function(){ // 奇数回目はe.hide 、偶数回目はe.showメソッドとなる
　　if (isbusy()) return;
　　odd[1] = !odd[1]; // 奇数か偶数かを反転させる
　　for (var p in animaCSS) animaCSS[p] = odd[1] ? "hide" : null;
　　$.each([$box1,$box2,$box3,$box4],function(i,n){
　　　if (!odd[1]) { // 偶数回目つまり e.show メソッドの２度目の起動前に
　　　　for (var p in animaCSS) // 終了値を強制的にアニメ開始値とする
　　　　　animaCSS[p] = initCSS[i][p];
　　　}
　　　this.animate(animaCSS,dur,selEasing,function(){ // complete funcを指定
　　　　for (var j=0; j<attrs.length; j++) // CSS style オブジェクトの各値を初期値に戻す。
　　　　　$.attr(n.get(0).style, attrs[j] ,initCSS[i][attrs[j]]);
　　　　if (i==3) { // 75％ボックスが最後まで表示されたら
　　　　　$done.attr("value",odd[1] ? "Do 表示アニメ" : "Do 隠蔽アニメ");
　　　　　elementsDisabled(""); //全て使用可とする
　　　　}
　　　});
　　});
　　$(this).blur();
　});
})();
FC2ブックマークに追加

jquery.js におけるアニメーションコードの解読 ( 7 )

ボックスアニメーションのサンプル

このエントリイでは jquery.js におけるアニメーションコードのこれまでの解読を踏まえて、一寸一息いれることとします。アニメサンプルを多数用意して、その解説を試みます。

ここでいう、ボックスアニメーションとは私が勝手に名付けた名称ですが、配置指定された div 要素のアニメーションを意味しています。

個々のボックスのアニメーションを 12 種類、その他これらのボックスを利用したアニメーションを 6 種類、計 18 種類のアニメを作成し、その挙動に関する解説を行い、末尾には作成したスクリプトを付けました。

18 種類のアニメーションサンプル

下のボタンをクリックすると隠蔽／表示アニメーションが起動します。 各々のボタンには、隠蔽と表示の 2 機能を持たせました。

ぼっくす 1
toggle()
ぼっくす 2
toggle(2000)
ぼっくす 3
起終点：中心
ぼっくす 4
起終点：右上
ぼっくす 5
起終点：右下
ぼっくす 6
起終点：左下
ぼっくす 7
起終線：上
（文字も変化）
ぼっくす 8
起終線：左
（文字無変化）
ぼっくす 9
起終点：左上（文字も変化）
ぼっくす 10 width だけ toggle
ぼっくす 11 borderWidth だけ toggle
ぼっくす 12 borderWidthをAnim 

▲ToTop

18 のサンプルアニメーションの解説

1 ： $().toggle() の挙動

jQuery インスタンスの toggle メソッドの例です。引数なしでこのメソッドを起動すると、$(htis).is(":hidden") メソッドによって当該要素の隠蔽/表示状態をチェックします。

その結果に応じて、もし true ならば $(this).hide() が、あるいは false ならば $(this).show() がそれぞれ起動され、それぞれのメソッドによって、this.style.display.none と this.style.display.block の切り替えが行われ、隠蔽と表示がアニメートされます。「時間」に係るコードは全く含まれないので、瞬時に行われる単純なアニメとなります。

2 ： $().toggle(2000) の挙動

1 と同じ jQuery インスタンスの toggle メソッドの例ですが、動作時間を指定した引数がある点が異なります。

この引数があると toggle メソッドの定義から animate(genFx("toggle",3),"slow") メソッドが起動され、この genFx("toggle",3) 関数実行によって margin、padding 及び content サイズ（ height と width ）並びに opacity の 4 つの（ 正確には margin と padding にはそれぞれ左右上下があるので、2×4＋3 で 11種類の ）プロパティがアニメーション対象となります。

ここで興味深いことは border がアニメ対象になっていないということです。当然のことですが、color プロパティと違って、border は jquery.js のアニメに馴染まない訳ではありません。実際 borderWidth を問題なくアニメ対象プロパティとして扱えることは、上のサンプル 11＆12 で示した通りです。

※ 実は color をアニメ対象とする jquery 拡張版 ui があります。effects.core.js の中に含まれています。

そもそも、border には幅の他に、値が数値ではない色とスタイルの属性があります。そのため border そのものはアニメ対象プロパティから除外したのかもしれません。borderWidth だけでもアニメ対象プロパティにしてもおかしくないはずなのですが、fxAttrs の対象にしなかったのはどうしてでしょうか。理由は判然としません。

さて、上の 11 のアニメ対象プロパティを対象として、animate メソッドの沢山のコードが進行します。animate メソッドの第 1 引数に genFx("toggle",3) が指定されたことにより、jQuery.fx のインスタンス e から、e.hide() や e.show() メソッドが起動され、そこから e.step() メソッドが起動されます。

こうして、11 のプロパティの値が、当初の表示状態値と 1 （ e.show() メソッドにおいて width と height プロパティを扱う場合 ） 又は 0 （ その他のプロパティの場合 ）の間を漸減／漸増させられて、アニメーションが引き起こされます。

最後に、$().toggle(2000) メソッドが、アニメ対象要素の左上に収斂し、その左上から展開されることに留意する必要があります。何故ならば、e.hide() や e.show() メソッドは、margin、padding、width、height を 0 に（ e.show() メソッドの場合 width と height は 1 に ）遷移させるのですから、左上に収斂しそこから展開することになるのです。

更に、これらのメソッドは不透明度も 0 と 1 の間を漸減／漸増させるため、不透明と透明の間を行き来することになります。

ここで触れたアニメの終点/起点の位置指定こそ、animate メソッドを扱う上での最も重要なポイントです。

▲ToTop

3 ： ボックス中心を起終点とするアニメの挙動

ボックス 2 では左上がアニメの起終点でした。当然その起終点位置を変えてみたくなります。

「 $().toggle メソッドを使う前提で、どうすれば起終点位置を変えられるか？ 」───かなり悩みました。toggle メソッドは e.show() や e.hide() メソッドを呼び出しますが、その中でプロパティ値は 0 又は 1 に変更されます。つまり起終点は左上です。そして toggle メソッドの定義から、何らかの引数により位置指定を変えることは不可能です。結局、位置指定は toggle メソッドでは行えません。このメソッドでは必ず左上に収斂し、そこから展開するアニメしか演出できません。

そしてさんざん考え抜いた結果ついに...。
「 位置指定を別のメソッドで行い、かつそれを toggle メソッドと並行起動すればよい」───このことに気がつきました。

起終点位置だけを指定するアニメーションメソッドは、基本的に top、left の初期値と終了値を適切に設定することになります。（アニメ対象要素は一般に position 指定を「絶対」か「相対」に指定しますので top 及び left が指定できます。）

具体的な対応方法はこのエントリイ最下部に掲載したコードを見て戴くとして、苦労した点を記録しておきます。

ボタンクリックでアニメを励起させていますが、そのボタンはボックスの表示アニメにも、あるいは隠蔽アニメにも、両刀使いするように設計してあります。

そして、初期状態がボックスの表示となっているのですから、toggle メソッドの別の使い方（ click の度に 2 つの関数を交互に起動する toggle メソッド ）を利用する方法もあります。しかしここでは、もっと一般的な方法を探りました。

ここで提示したアニメサンプルの場合、収斂／展開するアニメーションの起終点（線）を同一にしてあります。それが自然だからですが、同一の点や線から始まり／終わるアニメの場合、その初期値と終了値は正負の符号が異なる同一の絶対値となります。そこで、ボタンのクリック回数が奇数回か偶数回かによって、外サイズ取得値の正負を反転させて、起終点（ あるいは起終線 ）位置とするようコーディングしました。

▲ToTop

4 ： ボックス右上を起終点とするアニメの挙動

今度はボックスの右上を起終点とするアニメです。style.top ±= 0 及び style.left ±= box 外幅から、起終点値を出しました。

隠蔽/表示のトグル起動は 3 と同様の奇数回/偶数回による方法で対処しました。以下 5、6 共同様。

5 ： ボックス右下を起終点とするアニメの挙動

ボックスの右下を起終点とするアニメです。style.top ±= box 外高さ及び style.left ±= box 外幅から、起終点値を出しました。

6 ： ボックス左下を起終点とするアニメの挙動

ボックスの左下を起終点とするアニメです。style.top ±= ボックス外高さ 及び style.left ±= 0 により起終点値を出しました。

7 ： ボックス上辺を起終線とするアニメの挙動

ここからアニメの趣が変わります。これまでは全て $().toggle メソッドを利用してきました。起終点位置を （ 0, 0 ） 以外とするために animate メソッドを併行起動させた場合も、全て toggle メソッドとの併行起動でした。

ところが 7、8、10 〜 12 番目のサンプルは toggle メソッドを使っていません。但し、12 番目のサンプル以外はアニメ用 CSS オブジェクトのプロパティ値を "toggle" としていますので、プロパティ値を "toggle" とした場合の animate メソッドのコーディングによって、不透明度はアニメ対象になりませんが、縮小するアニメの場合には必ず最後に消滅し、展開する場合には最初に表示されます。

さて、7 番目のサンプルでは、縦方向のサイズに係るプロパティだけ（ height、marginTop、marginBottom、paddingTop 及び paddingBottom ）をアニメ対象とした上で、更に文字サイズもアニメ対象に追加してみました。

起こされるアニメは slideUp メソッドに酷似していますが、slideUp メソッドは使用せず、fxAttrs 配列を拡張した exAttrs と、genFx と全く同一な Fx メソッドを使用してアニメートさせました。
（ ここに独自に定義した配列とメソッドは、共に無名関数内のローカル変数としました。）

▲ToTop

8 ： ボックス左辺を起終線とするアニメの挙動

7 の変形でボックス左辺に畳み込み、そこから拡幅するメソッドです。文字サイズはアニメ対象としていません。アニメ用プロパティ値に "toggle" を指定しているので、縮小後に隠蔽され（ display.none ）、展開直前に表示が再開（ display.block ）されます。

9 ： ボックス左上を起終点とし文字サイズも変えるアニメの挙動

このアニメも exAttrs と Fn を活用して極めて短いコーディングで作りました。ボックス 2 の挙動に文字の変化を加えたものです。

10 ： width だけをアニメ対象プロパティとした挙動

アニメプロパティとして width だけを対象と、animate メソッドの第 1 引数であるアニメ用 CSS プロパティ値を "toggle" としました。従って、不透明度はアニメ対象とはなりませんが、縮小後に隠蔽され、展開直前に表示が再開されます。

11 ： borderWidth をアニメ対象とした挙動

jquery.js では borderWidth を標準的なアニメ操作対象としていないので、敢えてそれを対象としたアニメを作ってみました。

ここでも、animate メソッドの第 1 引数であるアニメ用 CSS プロパティ値を "toggle" としたので、不透明度はアニメ対象とはなりませんが、外枠線が細くなっていって最終的にボックスは hide され、他方、枠線が太くなる前にボックスが show されます。

12 ： borderWidth だけを animate させ、かつ step メソッドを利用した挙動

最後のサンプルはボーダーサイズだけを animete メソッドの対象とし、かつ、toggle 値を使っていないので、border 幅がゼロに縮小されても決してボックスは隠蔽されません。

また、animate メソッドの第 2 引数 speed をオブジェクトとして指定し、このサンプルだけ唯一 e.options.step メソッドを利用して、アニメーションの起動回数をカウントさせました。こうして 12 のサンプルの中で最もカスタマイズ度の高いものになりました。

アニメーションを起動すると、起動回数がボックス内文字列の最後に追加され、ストップウォッチのようにカウンタ数が変化します。

この animate メソッドではアニメ対象プロパティを 4 つ指定していますので、各プロパティ毎の起動回数は、カウンタ値を 4 で割れば算出できます。

なお、アニメーションの起動回数は、duration 指定時間、CPU の性能、メモリの空き具合、ブラウザの Javascript 解析/実行性能等に左右されますから、同じ duration 指定であってもブラウザとパソコンの性能毎に異なることになります。

▲ToTop

13 ： 全てのアニメを一斉に起動する挙動

12 番目までのサンプルを一斉にアニメーションさせたいと思い、それを実行しました。

スクリプトは、ボタン click メソッドの引数において、各アニメ起動関数を対象として each メソッドで巡回処理しているだけです。

14 ： 全てのアニメを順次起動する挙動

12 番目までのサンプルを一斉にアニメーションさせた次には、一斉ではなく順次起動させることもおもしろい、と思い立ちそれを実行しました。

スクリプトでは、ボタン click メソッドの引数における 12 番目までのアニメ起動関数を、setTimeout 関数を使って一定間隔で遅延させながら巡回処理しました。

15： ランダムに 2 つのボックスを選択させて入れ替える挙動

一斉及び順次起動するアニメーションの次には、乱数関数を使って任意に 2 つのボックスを選択させ、それらの位置を互いに入れ替えるアニメーションを考えました。2 つのボックスの top 値と left 値を相互に入れ替えるだけなので決して複雑なコーディングは要りません。

なお、ここでは 弾性的動きを引き起こす easing 関数を採用してみました。この結果「イヤイヤしながら仕方なく移動する」ような動きとなりました(爆爆WWW)

16： 6 つのボックスを同時に入れ替える挙動

2 つのボックス入れ替えをやってみたら、もっと多くのボックスを同時に入れ替えてみたいと思い、それを実現しました。

注意した点は、必ず 異なる 6 つのボックスを選択させなければならない、ということです。1 〜 12 迄の乱数を乱数関数で発生させ、そのうちの 6 個を使うわけですから、関数からの返値が同じ値になる可能性は非常に高いわけです。

大変冗長なコードになりましたが、返値について 1 つずつ同じかどうかチェックし、同じ場合には乱数発生をやり直して、必ず 6 つの値が異なるようにしました。

なお、折角の機会なので easing 関数は全て異なるものを使ってみました。

17： ボックス位置交換をタイムラグを持たせて行う挙動

更に、ボックス入れ替えを同時にではなく、タイムラグを持たせて実行してみたい、と思いそれを実現しました。

タイムラグは setTimeout 関数で animate メソッドの起動を遅延させて実現しました。

18： ボックスの並び順を整列する挙動

12 個全てのボックスを瞬時に番号順に整列します。ボックスの番号を頼りに top 値と left 値を算出する代数式を考え、コーディングして全ボックスを瞬時に整列するようにしました。入れ替わった箇所だけを元に戻すのは大変なので、簡便で安易な方法を採用しました（＾＾；。

上の 18 アニメサンプルに関するスタイルシートとスクリプト

■ スタイル設定
　#animArea {
　　width:485px; height:440px;margin-top:1em;
　　position:relative; background:lightcyan;
　　padding:10px;
　　text-align:center;
　　line-height:1.2em;
　}
　button.btn {margin:5px; overflow:visible; padding:2px;}
　#box1_724, #box2_724, #box3_724, #box4_724, #box5_724, #box6_724,
　#box7_724, #box8_724, #box9_724, #box10_724, #box11_724, #box12_724 {
　　position:absolute;left:10px;
　　margin:10px 10px 10px 10px;
　　border:palegoldenrod 10px ridge;
　　padding:5px;
　　width:110px; height:60px;
　　background:royalblue;
　}
　#box4_724, #box5_724, #box6_724 {
　　top:120px;
　}
　#box7_724, #box8_724, #box9_724 {
　　top:230px;
　}
　#box10_724, #box11_724, #box12_724 {
　　top:340px;
　}
　#box2_724, #box5_724, #box8_724, #box11_724 {
　　left:170px;
　　border:lightblue 10px outset;
　}
　#box3_724, #box6_724, #box9_724, #box12_724 {
　　left:330px;
　　border:plum 10px inset;
　}
■Javascript
(function(){
　var exAttrs = [
　　// height animations
　　[ "height", "marginTop", "marginBottom", "paddingTop", 
　　　"paddingBottom", "borderTopWidth","borderBottomWidth" ],
　　// width animations
　　[ "width", "marginLeft", "marginRight", "paddingLeft",
　　　"paddingRight", "borderLeftWidth","borderRightWidth" ],
　　// opacity animations
　　[ "opacity" ],
　　// fontsize animations
　　[ "fontSize" ]
　];
　function Fn( type, num ){
　　var obj = {};
　　jQuery.each( exAttrs.concat.apply([], exAttrs.slice(0,num)), function(){
　　　obj[ this ] = type;
　　});
　　return obj;
　}
　var i=1,j=13,$btn=[],$box=[],hidden=[],even=[],w=[],h=[],flag=[],duration=2000;
　for (; i<j; i++) {
　　$btn[i] = $("#btn" + i +"_724");
　　$box[i] = $("#box" + i + "_724");
　　hidden[i] = $box[i].is(":hidden");
　　w[i] = !hidden[i] && $box[i].outerWidth() || 0;
　　h[i] = !hidden[i] && $box[i].outerHeight() || 0;
　　flag[i]=0;
　}
　for (var i=13; i<19; i++) {
　　$btn[i] = $("#btn" + i +"_724");
　}
　$("button.btn").hover(
　	function(){$(this).css("background-color","paleturquoise")},
　	function(){$(this).css("background-color","")}
　).toggle(
　　function(){$(this).css("background-color","thistle")},
　　function(){$(this).css("background-color","palegreen")}
　);

　if(!$box[12].is(":hidden")) {
　　var bordLeft =  $box[12].css("border-left-width"),
　　bordRight = $box[12].css("border-right-width"),
　　bordTop = $box[12].css("border-top-width"),
　　bordBottom = $box[12].css("border-bottom-width");
　}
　$box[12].append("<span/>");

　function anim1(){$box[1].toggle();}
　function anim2(){$box[2].toggle(duration);}
　function anim3(){
　　var even = ++flag[2] % 2 === 0,
　　　leftAnim=( ( hidden[3] + even ) ? "-=": "+=" ) + w[3]/2 +"px",
　　　topAnim=( ( hidden[3] + even ) ? "-=" : "+=" ) + h[3]/2 +"px";
　　$box[3].toggle({queue:false,duration:duration})
　　　.animate( {left:leftAnim, top:topAnim},duration );
　}
　function anim4(){
　　var even = ++flag[3] % 2 === 0,
　　　leftAnim=( ( hidden[4] + even ) ? "-=": "+=" ) + w[4] +"px";
　　$box[4]
　　　.animate( {left:leftAnim},{queue:false,duration:duration} )
　　　.toggle(duration);
　}
　function anim5(){
　　var even = ++flag[5] % 2 === 0,
　　　leftAnim=( ( hidden[5] + even ) ? "-=": "+=" ) + w[5] +"px",
　　　topAnim=( ( hidden[5] + even ) ? "-=" : "+=" ) + h[5] +"px";
　　$box[5]
　　　.animate( {left:leftAnim, top:topAnim},{queue:false,duration:duration} )
　　　.toggle(duration);
　}
　function anim6(){
　　var even = ++flag[6] % 2 === 0,
　　　topAnim=( ( hidden[6] + even ) ? "-=" : "+=" ) + h[6] +"px";
　　$box[6]
　　　.animate( {top:topAnim},{queue:false,duration:duration} )
　　　.toggle(duration);
　}
　function anim7(){$box[7].animate(
　　$.extend(Fn("toggle",1),{fontSize:"toggle"}),duration
　)}
　function anim8(){$box[8].animate({
　　width:"toggle",marginLeft:"toggle",marginRight:"toggle",
　　paddigLeft:"toggle",paddingRight:"toggle",borderLeftWidth:"toggle",
　　borderRightWidth:"toggle"},duration
　)}
　function anim9(){$box[9].animate(Fn("toggle",4),duration);}
　function anim10(){$box[10].animate({width:"toggle"},duration)}
　function anim11(){$box[11].animate({
　　borderLeftWidth:"toggle", borderRightWidth:"toggle",
　　borderTopWidth:"toggle", borderBottomWidth:"toggle"
　},duration)}
　function anim12(){
　　var k=0, even = ++flag[12] % 2 === 0,
　　leftAnim = (( hidden[12] + even ) ? "+=": "-=") + bordLeft;
　　rightAnim = (( hidden[12] + even ) ? "+=": "-=") + bordRight;
　　topAnim = (( hidden[12] + even ) ? "+=": "-=") + bordTop;
　　bottomAnim = (( hidden[12] + even ) ? "+=": "-=") + bordBottom ;
　　$box[12].animate({
　　　　borderLeftWidth :leftAnim, borderTopWidth:topAnim, 
　　　　borderRightWidth:rightAnim, borderBottomWidth:bottomAnim
　　　},{
	　　duration:duration, step : function(){k++; $(this).children().text(k);}
　　　}
　　);
　}

　var animList =[anim1,anim2,anim3,anim4,anim5,anim6,anim7,anim8,anim9,anim10,anim11,anim12];
　$.each(animList,function(i,n){ $btn[i+1].click(n) });
　$btn[13].click(function(){$.each(animList,function(i,n){n()})});
　$btn[14].click(function(){
　　$.each(animList,function(i,n){setTimeout(n,400*i)})
　});
　// 乱数を使って 2 つのボックスの位置を交換する
　$btn[15].click(function(){
　　var A = parseInt(Math.random()*12)+1,
　　　　B = parseInt(Math.random()*12)+1,posA={},posB={};
　　while ( A===B ){
　　　　B = parseInt(Math.random()*12)+1;
　　　　if (A!==B) break;
　　}
　　var $boxA=$("#box"+A+"_724"),$boxB=$("#box"+B+"_724");
　　$boxA.animate({top:$boxB.css("top"),left:$boxB.css("left")},duration,"easeInOutBounce");
　　$boxB.animate({top:$boxA.css("top"),left:$boxA.css("left")},duration,"easeInOutElastic");
　});
　// 乱数を使って 6 つのボックス位置を一瞬で入れ替える
　$btn[16].click(function(){
　　var A = parseInt(Math.random()*12)+1,
　　　B = parseInt(Math.random()*12)+1,
　　　C = parseInt(Math.random()*12)+1,
　　　D = parseInt(Math.random()*12)+1,
　　　E = parseInt(Math.random()*12)+1,
　　　F = parseInt(Math.random()*12)+1,
　　　posA={},posB={},posC={},posD={},posE={},posF={};
　　while ( A===B ){
　　　B = parseInt(Math.random()*12)+1;
　　　if (A!==B) break;
　　}
　　while ( C===A || C===B){
　　　C = parseInt(Math.random()*12)+1;
　　　if (C!==A &&C!==B) break;
　　}
　　while ( D===A || D==B || D===C){
　　　D = parseInt(Math.random()*12)+1;
　　　if (D!==A && D!==B && D!==C) break;
　　}
　　while ( E===A || E==B || E===C || E===D){
　　　E = parseInt(Math.random()*12)+1;
　　　if (E!==A && E!==B && E!==C && E!==D) break;
　　}
　　while ( F===A || F==B || F===C || F===D || F===E){
　　　F = parseInt(Math.random()*12)+1;
　　　if (F!==A && F!==B && F!==C && F!==D && F!==E) break;
　　}
　　var $boxA=$("#box"+A+"_724"), $boxB=$("#box"+B+"_724"),
　　　$boxC=$("#box"+C+"_724"), $boxD=$("#box"+D+"_724"),
　　　$boxE=$("#box"+E+"_724"), $boxF=$("#box"+F+"_724");
　　$boxA.animate({top:$boxB.css("top"),left:$boxB.css("left")},duration,"easeInOutBounce");
　　$boxB.animate({top:$boxA.css("top"),left:$boxA.css("left")},duration,"easeInOutElastic");
　　$boxC.animate({top:$boxD.css("top"),left:$boxD.css("left")},duration,"easeInOutExpo");
　　$boxD.animate({top:$boxC.css("top"),left:$boxC.css("left")},duration,"easeInOutQuart");
　　$boxE.animate({top:$boxF.css("top"),left:$boxF.css("left")},duration,"easeInOutCirc");
　　$boxF.animate({top:$boxE.css("top"),left:$boxE.css("left")},duration,"easeInOutBack");
　});

　// ボックス位置交換をタイムラグを持たせて行う
　$btn[17].click(function(){
　　var A = parseInt(Math.random()*12)+1,
　　　　B = parseInt(Math.random()*12)+1,
　　　　C = parseInt(Math.random()*12)+1,
　　　　D = parseInt(Math.random()*12)+1,
　　　　E = parseInt(Math.random()*12)+1,
　　　　F = parseInt(Math.random()*12)+1,
　　　　posA={},posB={},posC={},posD={},posE={},posF={},delay=800;
　　while ( A===B ){
　　　B = parseInt(Math.random()*12)+1;
　　　if (A!==B) break;
　　}
　　while ( C===A || C===B){
　　　C = parseInt(Math.random()*12)+1;
　　　if (C!==A &&C!==B) break;
　　}
　　while ( D===A || D==B || D===C){
　　　D = parseInt(Math.random()*12)+1;
　　　if (D!==A && D!==B && D!==C) break;
　　}
　　while ( E===A || E==B || E===C || E===D){
　　　E = parseInt(Math.random()*12)+1;
　　　if (E!==A && E!==B && E!==C && E!==D) break;
　　}
　　while ( F===A || F==B || F===C || F===D || F===E){
　　　F = parseInt(Math.random()*12)+1;
　　　if (F!==A && F!==B && F!==C && F!==D && F!==E) break;
　　}
　　var $boxA=$("#box"+A+"_724"), $boxB=$("#box"+B+"_724"),
　　　　$boxC=$("#box"+C+"_724"), $boxD=$("#box"+D+"_724"),
　　　　$boxE=$("#box"+E+"_724"), $boxF=$("#box"+F+"_724");
　　$boxA.animate({top:$boxB.css("top"),left:$boxB.css("left")},duration,"easeInOutBounce");
　　$boxB.animate({top:$boxA.css("top"),left:$boxA.css("left")},duration,"easeInOutElastic");
　　setTimeout(function(){
　　　$boxC.animate({top:$boxD.css("top"),left:$boxD.css("left")},duration,"easeInOutExpo");
　　　$boxD.animate({top:$boxC.css("top"),left:$boxC.css("left")},duration,"easeInOutQuart");
　　},delay);
　　setTimeout(function(){
　　　$boxE.animate({top:$boxF.css("top"),left:$boxF.css("left")},duration,"easeInOutCirc");
　　　$boxF.animate({top:$boxE.css("top"),left:$boxE.css("left")},duration,"easeInOutBack");
　　},delay*2);
　});

　// ボックスを整列する
　$btn[18].click(function(){
　　for (var i=1; i<13; i++){
　　　$box[i].css({top:110*parseInt((i-1)/3)+10 +"px",left:(i-1)%3*160+10 +"px"});
　　}
　});
})();

▲ToTop

FC2ブックマークに追加

jquery.js におけるアニメーションコードの解読 ( 6 )

jQuery().animate(prop, speed, easing, callback)───その 3

このエントリイでは下の模式図における色づけ部分（ e.custom → e.step → e.update ）、すなわち二重巡回処理内での「初期値設定、終了値設定、経過時刻取得、その時点の要素表示」という一連の流れを跡付け、愈々 「 動き 」 演出過程の核心に迫ります。

$().animate(prop,speed,easing,callback){
　$().each(func(){ || $().queue(func(){ //イテレートその１（ 対象要素毎 ）
　　$.each(prop,func(name,val){ //イテレートその２（ CSSスタイルプロパティ毎 ）

■このエントリイで解読する部分
　　▼ val が toggle || show || hide 
　　　　　→ e.show || e.hide メソッド起動
　　　　　　これらのメソッド内で最終的に e.custom メソッドを起動
　　▲ val がその他ならば
　　　　　→ e.custom メソッドを起動

　　● e.custom ＝初期値を取得し、アニメ開始時刻を記録する。
　　　 　↓
　　　 　e.step ＝開始時刻からの経過時刻、その時点におけるCSS値などを設定する。
　　　 　　↓
　　　 　　e.update ＝その時点のCSS値に基づいて要素を表示する。

　　}); // prop 巡回function
　}); // jQueryインスタンスに登録された要素を巡回するfunction
};

jQuery.fx(elem, options, prop) コンストラクタと e インスタンス

引数：順にタグ要素、オブジェクト、プロパティ名称

役割：アニメーションを具体化する各種メソッドやプロパティを持つインスタンスを生成する。

このコンストラクタに new 演算子を適用して生成されるインスタンス e は、当初はコンストラクタの定義から次の 3 つのプロパティを持ちます。

　e ={
　　 elem : 第 1 引数, options : 第 2 引数, prop : 第 3 引数, options.orig : {}
　}

その後、各種メソッドによる e のプロパティの拡張/追加や、当該コンストラクタの prototype オブジェクトも定義されるので、e オブジェクトは最終的に次のように拡張されます。こうして e オブジェクトは現在進行中のアニメに係る各種情報を満載したオブジェクトになります。また、#4151 〜 4171 によって、jQuery.fx クラスは 2 つのクラスプロパティを与えられます。

これらのことを模式図的にまとめると以下のようになります。

■ jQuery.fx コンストラクタの e インスタンス
 e = {
　elem：elem,// 第 1 引数
　prop:propName, // 第 3 引数
　options: {
　　queue:false || true, step:function(){・・・}, // これらはユーザーが指定する。
　　old,complete,easing,duration,display,overflow,// animateメソッドから引き継がれる。
　　curAnim, //animateメソッドの第一引数である prop オブジェクトが格納される。
　　orig:{prop},
　　show:true || false || undefined, hide:true || false || undefined
　},
　startTime, start, end, unit, now, pos, state,
　// メソッド
　cur(), custuom(), step(), update(), show(), hide()
}

■ jQuery.fx コンストラクタのクラスプロパティ
 jQuery.fx.speeds = {"slow":600, "fast":200, _default:400}
 jQuery.fx.step = {opacity:fn(e){・・}, _default:fn(e){・・}}

それでは上の「 ■このエントリイで解読する部分 」 の模式図に従って、e インスタンスの各種メソッドを跡付けることにします。最初に登場するのは e.show() メソッドです。

▲ToTop

はじめに ─── $().show() / $().hide() と e e.show() / e.hide()

これから解読する e.show() メソッドと e.hide() メソッドは、jQuery インスタンスから起動される show() メソッド、hide() メソッドと表現が酷似しています。最初は余りに似ているこの表現に戸惑いました。

jQuery インスタンスの show / hide メソッドを引数なしで起動した場合には、displayプロパティが none 以外（ show の場合 ）、あるいは none（ hide の場合 ）に設定されて、対象タグ要素が瞬時に表示 / 隠蔽されます。

これに対して、jQuery インスタンスの show / hide メソッドをアニメ所要時間などの引数付きで起動した場合には、animate メソッドが呼び出されて、そこから更に e.show / e.hide メソッドが呼び出されます。この時 e.show / e.hide メソッドは決して display 値を none とすることはなく、常に表示モードのママ保たれます。

瞬時アニメと時間を掛けて行うアニメ動作では、時間要素の有無という根本的な差異があるため、スクリプト動作も本質的に変わります。

jQuery インスタンスの show / hide メソッドは、style.display プロパティの none と block、inline などの値を使用して表示と隠蔽を操作し、これに対して e.show / e.hide メソッドは、時間を掛けて当該タグ要素の大きさ等に係る各種 CSS プロパティ値（マージン、パディング、内容及び不透明度の他、ボーダーサイズ、フォントサイズ等々も対象となる）を操作して、要素の表示状態を変化させます。ここでは表示状態を操作するのであって、決して要素を隠蔽することはありません。

e.show() メソッド

引数：なし

返値：なし

機能：対象要素の対象 CSS プロパティ値の、初期値（ 0 又は 1 ）と終了値を設定し、これらを custom メソッドに渡します。こうして最小或いは透明な表示状態 ＝「 実質的な非表示状態 」から、表示状態へと移行するアニメーションが実現されます。

このメソッドは対象要素に対して、「実質的な」非表示状態からアニメ前にブラウザが描画していた値までのアニメーションを引き起こします。その進行は次の 3 過程に分けられます｡

第 1 過程（ #4070〜4072 ）はアニメ開始前の style.properties 値の記憶です。アニメーション開始前に、アニメ対象タグ要素 elem の elem.style.properties を、e.options.orig プロパティに待避／記憶させます。このメソッドから最終的に起動される update メソッドが、elem.style.properties を書き換えてアニメーションを実現するので、この過程が必要となります。

また、CSS プロパティ値を記憶させた後に e.options.show 値を true に設定し、e.show() メソッドが起動されたことも記憶させます。

第 2 過程（ #4077 ）では、対象 CSS プロパティの初期値と終了値を custom メソッドに渡します。初期値はプロパティが width または height の場合には 1 、その他の場合には 0 とし、終了値は e.cur メソッドを起動して取得します。こうして得られた初期値と終了値を引数にして custom が起動されます。

ここに対象 CSS プロパティの初期値を 1 又は 0 とするのは、言うまでもなく当該要素のアニメーションを「実質的な非表示状態」から開始するためです。

第 3 過程は $(this).show()メソッドの起動です。これにより custom メソッドが終了し、既に当該要素が表示状態になっていることを "olddisplay" という名称で当該要素に関連づけます。

4068:　// Simple 'show' function
4069:　show: function(){
4070:　　// Remember where we started, so that we can go back to it later
　　　　 // 4077 行でスタイル属性値を 1 又は 0 ゼロにするので、現在値を記憶させておく。
　　　　 // options.orig オブジェクトの prop プロパティに
　　　　 // 当該要素のスタイル属性オブジェクトの prop プロパティの値を代入する。
4071:　　this.options.orig[this.prop] = jQuery.attr( this.elem.style, this.prop );
4072:　　this.options.show = true; // e.show メソッドが起動されたことを記録する。
4073:
4074:　　// Begin the animation
4075:　　// Make sure that we start at a small width/height to avoid any
4076:　　// flash of content
　　　　 // ちらつきを避けるために幅と高さの最小値はゼロとせず、その他のスタイル
　　　　 // 属性値は CSS 値はゼロとして start CSS 値を設定し、end CSS 値をカレント
　　　　 // スタイル値として、custom メソッドを起動する。
4077:　　this.custom(this.prop == "width" || this.prop == "height" ? 1 : 0, this.cur());
4078:
4079:　　// Start by showing the element
4080:　　jQuery(this.elem).show(); // jQuery インスタンスメソッド show()の起動により、
4081:　},// 当該要素が表示状態にある等の情報を記録させる。

▲ToTop

e.hide() メソッド

引数：なし

返値：なし

機能： e.show() メソッドの逆のことを行います。表示状態から「 実質的な 」非表示状態へと移行するアニメーションを引き起こします。

このメソッドの進行過程は単純です。最初に行うことは、e.show() メソッドと全く同一です。当初描画時の CSS プロパティ値を e.options.orig プロパティに待避/記憶させ、かつ、e.options.hide 値を true に設定し、e.hide() メソッドが起動されたことも記憶させます。（#4085〜4087）

次に、 custom メソッドに対象 CSS プロパティの初期値と終了値を渡して、表示状態から隠蔽状態へ移行するアニメーションを励起します。この初期値は e.cur() メソッドを起動させて現在表示値を取得し、終了値は 0 です。（#4089〜4090）

ここに、e.show メソッドの場合と異なり、非表示状態の CSS 値を全てゼロとしていることに留意する必要があります。

showメソッドの場合には、非表示状態から表示状態へ遷移する際の "ちらつき" を防止するため、プロパティ名が width と height の時にはプロパティ初期値を 1 としていましたが、e.hide メソッドの非表示状態値（＝アニメ終了値）は、プロパティに関わらず全てゼロとしています。隠蔽する場合にはちらつき問題が発生しないから、全てのプロパティ値をゼロにしても支障がないのです。

それでも決して display 値は none にしていないことも同時に確認しておく必要があります。e.hide メソッドは要素を CSS 的には隠蔽せず、実質的な非表示状態で表示し続ける、と言えばよいでしょうか。

4083:　// Simple 'hide' function
4084:　hide: function(){
4085:　　// Remember where we started, so that we can go back to it later
4086:　　this.options.orig[this.prop] = jQuery.attr( this.elem.style, this.prop );
4087:　　this.options.hide = true; // this.options.hide プロパティを true とする。
4088:
4089:　　// Begin the animation
　　　　 // CSS 現在値を start に、end 値をゼロとして custom メソッドを起動する。
4090:　　this.custom(this.cur(), 0);
4091:　},

▲ToTop

e.custom(from,to,unit) メソッド

引数：順に、初期値、終了値、単位

返値：なし

機能：初期値、アニメ開始時刻、e インスタンスのアニメ用の各種プロパティ（ start、end、unit、now、pos 及び state ）と 1 つの関数（ t 関数 ）を次々に設定し、その後 e.step() メソッドを起動して、インターバル関数によって 13 ミリ秒毎、当該要素の各プロパティ毎にプロパティ値を変化させ、もってそれを表示させてアニメーションを実現し、更に終了処理を行います。

このメソッドはその名の通り、カスタム （ slideUp や fadeOut などの既成アニメーションではない、ユーザー指定の ） アニメーションの中核を為します。その役割により 2 つのブロックに分けて考察します。

前半の過程
#4038 〜 4050 では、現在対象としているプロパティのアニメ開始時刻、アニメ初期値、アニメ終了値、単位等を設定し、それを利用して演算する e.step メソッドを起動させる t 関数を定義します。また t 関数のプロパティとして対象要素を登録します。ここまでは非常に分かりやすい簡単なコード進行です。
後半の過程

#4050 〜 4065 は、前半とは対照的に大変複雑です。

改めてアニメコードの全体を思い起こすと、今対象としている動作は animate メソッドの jQuery インスタンスの各要素毎の巡回処理の、その中での各 CSS プロパティ毎の巡回処理過程で引き起こされている事象です。この複雑さ故にコード進行過程が分かりにくいので、操作対象を以下のように可視化してみます。

対象としている jQuery インスタンスに登録されているタグ要素数を m 、アニメ用の CSS オブジェクトに登録されているプロパティ数を n として、或る t 関数がどの要素のどのプロパティのためのものなのか分かるように、以下のように表示します。但し、この数列に酷似した表示はあくまでも説明用です。

  • 最初の要素に対する最初のアニメプロパティ用 t 関数……e1 t p1
  • 最初の要素に対する 2 番目のアニメプロパティ用 t 関数……e1 t p2
  • j 番目の要素に対する k 番目のアニメプロパティ用 t 関数……ej t pk
  • m 番目の要素に対する n 番目のアニメプロパティ用 t 関数……em t pn

上のように各々が識別できる（ m × n ）個の t 関数を名付けた上で、#4052-4064 を解読します。

▲ToTop

後半の過程の詳説
  1. e1 t p1 、つまり最初の要素に対する最初のアニメプロパティに係る t 関数が 4052 行で実行されると、初めて step メソッドが起動され、その時の時刻が ローカル変数 t に記録されます。この 変数 t が custom メソッドで定義された e.startTime（s）に、animate メソッドの引数から定められた duration 時間（d）を加算した時刻（ s + d ）以内であれば （ つまり t ≦ s + d であれば ）、step メソッドは、それ自信の中で算出するその時のプロパティ値に基づいて、対象要素の表示サイズなどを算出してから、update にそれを渡します。そして update メソッドは受け取った値からブラウザに要素を表示してから true を custom メソッドに返します。
  2. 4052 行において、t() に拠る返値が true となるので、jQuery.timers 配列の要素にその t 関数 e1 t p1 が追加され、3 番目の式 !timerId が評価されます。ここに、jquery.js トップレベルで定義されている変数 timerId は jquery.js コードの中で custom メソッドでしか使われていませんから、step メソッドから 1 つ目の true が返された時には、timerId は未定義です。つまり !timerId === true となります。こうして 4052 行の if 文が成立して、インターバル関数が起動され、以後は 13 ミリ秒ごとに t 関数が呼び出され、その返値の評価を行う行為が繰り返されます。
  3. 4052 行の if 文が成立した 13 ミリ秒後には、4056 行により timers 配列の 0 番目の要素である e1 t p1 が再度実行されます。このとき依然として 変数 t ≦ s + d ならば、step メソッド内で算出された値に基づいて、e1 要素の 2 度目の描画がおこなわれます。そして当該要素は 13 ミリ秒後に再び起動されるために配列内に残されたママとなります。他方 変数 t ＞ s + d ならば、step メソッドが当該プロパティに係る終了処理 ( その内容については step メソッドで解説します ) を行ってから false を返すので、4057 行の if 文が成立して、e1 t p1 関数が配列から削除されます。（#4058）
    以上のような e1 t p1 の 13 ミリ秒毎の反復起動によって、e1 要素の変化が演出されます。
  4. さて、13ミリ秒毎の繰り返しと並行して、Javascript インタープリタは setInterval 関数を起動した直ぐ後に 同一要素の次のプロパティ（e1p2）を対象とした処理に進みます。3892 行の jQuery.each メソッドが 2 つめの prop を対象とした処理を行うのです。そして再び custom メソッドが起動され、その前半過程が処理され後半過程に入ってきます。今度 4052 行で起動される t 関数は e1 t p2 となり、再び jQuery.timers 配列にその t 関数 e1 t p2 が追加されます。
  5. この t 関数を追加した時点でまだ e1p1 のアニメが終わっていなければ 4052 行の if 文は成立しませんが、timers 配列には今追加したばかりの t 関数も含まれるので、13ミリ秒毎に繰り返される e1 要素のプロパティ値の変化過程が 2 つのプロパティで行われることになります。
  6. 他方、e1 t p2 関数追加時点で e1p1 に係るアニメが終わっていれば、4062 行により timerId は未定義となっているので、4052 行の！timerId が成立して、再びインターバル関数が 13 ミリ秒毎の t 関数実行を開始します。こうして最初の要素の 2 つ目のアニメプロパティに係る動きが演出されていきます。
  7. 以上のような過程が、対象とした jQuery インスタンスに格納されている m 個の要素毎の、それぞれ n 個のアニメプロパティにおいて繰り返されます。そして n × m 回の custom - step - update の連鎖起動の反復繰り返しを経て、遂に、対象とした jQuery インスタンスから起動された animate メソッドはその役割を終えます。
4036:　// Start an animation from one number to another
4037:　custom: function(from, to, unit){
4038:　　this.startTime = now(); // 現在時刻を登録する。
4039:　　this.start = from; // アニメ開始値
4040:　　this.end = to; // アニメ終了値
4041:　　this.unit = unit || this.unit || "px";
4042:　　this.now = this.start; // = from となる。
4043:　　this.pos = this.state = 0;
4044:
4045:　　var self = this; // this は jQuery.fx クラスのインスタンス
4046:　　function t(gotoEnd){ // t 関数を定義する
4047:　　　return self.step(gotoEnd); // step メソッドの実行結果を返す。
4048:　　}
4049:
4050:　　t.elem = this.elem; // t の elem プロパティ値に、this.elem を代入する。
4051:　　// t 関数の実行結果が true で、t 関数を追加した timers 配列が存在し、
　　　　 // かつ timerId が存在しなければ
4052:　　if ( t() && jQuery.timers.push(t) && !timerId ) {
4053:　　　timerId = setInterval(function(){
4054:　　　　var timers = jQuery.timers;
4055:
4056:　　　　for ( var i = 0; i < timers.length; i++ )
4057:　　　　　if ( !timers[i]() ) // timers[i] の実行結果が false ならば
4058:　　　　　　timers.splice(i--, 1); // i 番目の要素を削除してから i を 1 減じる。
4059:
4060:　　　　if ( !timers.length ) { // timers 配列の要素がなくなれば
4061:　　　　　clearInterval( timerId ); // timerId を停止し、
4062:　　　　　timerId = undefined; // timerId を未定義とする。
4063:　　　　}
4064:　　　}, 13);
4065:　　}
4066:　},

▲ToTop

e.cur(force) メソッド

引数：強制的に算出スタイル値の取得を行う場合 true とする。

返値：スタイル値（タグ属性に記述されたスタイル値、又はスタイルオブジェクトで設定されているスタイル値、又は算出スタイル値）

機能：返値の説明の通り。

e.cur メソッドは、animate、e.show、e.hide などの各種メソッドから呼び出されて、タグ属性や style オブジェクトに設定されているスタイル値を取得し、あるいは指定があれば算出スタイル値を取得します。

まず、animate メソッドからは引数 true 付きで呼び出されます。（#3899）true 付きなので対象要素のアニメ開始前の算出スタイル値が強制的に取得され、その値がアニメ開始値とされます。

他方、e.show メソッド及び e.hide メソッドからは引数なしで呼び出されるので（#4077）、アニメ開始前の対象要素のタグ属性値又は style オブジェクト値が取得されて、アニメ終了値となります。

4027:　// Get the current size
4028:　cur: function(force){
　　　　 // 要素属性に当該プロパティ値が存在し、かつスタイル属性がないか、
　　　　 // あっても当該プロパティ値がない場合には
4029:　　if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) )
4030:　　　return this.elem[ this.prop ]; // 要素属性値を返す。
4031:　　// 当該要素の当該プロパティ値を単位名なしで取得する。
4032:　　var r = parseFloat(jQuery.css(this.elem, this.prop, force));
　　　　 // r がゼロ以外で -1 万よりも大きければ r を返す。
　　　　 // さもなければ force 引数なしで当該要素の当該プロパティの CSS 値を取得する。
　　　　 // 取得できなければ 0 を返す。
4033:　　return r && r > -10000 ? r : parseFloat(jQuery.curCSS(this.elem, this.prop)) || 0;
4034:　},

▲ToTop

e.step(gotoEnd) メソッド

引数：gotoEnd を true に設定すると対象要素のアニメーションを停止させます

返値：false（アニメが終了した時） 又は true（アニメ実行中の時）

機能：2つの役割があり、第 1 はアニメ開始とアニメ終了の始点/終点間のプロパティ値を経過時間に基づいて刻むことです。この場合、返値 true を e.custom メソッドに返します。第 2 は、アニメ終了後の処理を行うことです。この場合返値 false を e.custom メソッドに返します。

このメソッドを理解する前提として、呼び出し元の e.custom メソッド及びその呼び出し元の animate メソッドによって、e.options オブジェクトの各種プロパティが既に拡張されていること、そしてそれらが e.step メソッドで縦横に利用されることを踏まえておく必要があります。

step メソッドはまず最初に、このメソッドが呼び出された時刻を変数 t に記録します。最初に行うこの作業は、時間という 「 変数 」 を管理し、要素の描画を自在に操作する上で不可欠です。

アニメーションを刻む場合

変数 t の値 （ step メソッドの起動時刻 ） が、e.custom メソッドが起動された時刻 （ startTime ） と e,options.duration の合算値よりも小さければ、すなわち、アニメが起動してからまだ duration で指定されている時間が経過しきらない内に step メソッドが起動された場合には、e.step メソッドはアニメーションを刻むためのプロパティ値の設定を以下のように行います。（ #4134 〜 4144 ）

  1. #4135 の変数 n は経過時間です。
  2. #4136 の e. state は動作状態変数 （ 「 動作ステータス 」とも呼ばれるらしい ）と呼ぶべきもので、duration 時間を 1 としたときの経過時間の割合を表します。0 〜 1 未満の値となります。例えば e.state == 0.5 ならば （ その値は options.step メソッドによって取り出さない限りユーザーには見えませんが ） アニメが半分進行したその瞬間を表すことになります。
  3. #4139 の e.pos には n 、e.state 及び e.options.duration の 3 つの値から easing 関数を使用して、その時点における変化率を算出した結果が代入されます。なお、easing 関数は、(1)ユーザー指定のもの、(2)それがなければ jquery.js で定義されている swing、(3)何らかの理由によりそれも定義されていなければ linear が使用されます。裏返せば default easing は swingです。
  4. #4140 の e.now には直前で取得した変化率に、アニメによる変化量（ 終了値 −開始値 ） を乗じて変化値を算出し、それを開始値に加算した結果が代入されます。
    こうして、その state におけるプロパティ値が得られます。
  5. 最後に #4143 にて e.update メソッドによりブラウザ表示を更新してアニメーションの刻みが終わります。

▲ToTop

アニメーションの終了処理を行う場合

(1) e.step の引数が true の場合、または (2) 変数 t の値 （ step メソッドの起動時刻 ） が、e.custom メソッドが起動された時刻 （ startTime ） と e,options.duration の合算値以上の場合には、すなわち、アニメ停止が指示されたか、またはアニメが起動してから既に duration 時間が経過してしまった時点で step メソッドが起動された場合には、e.step メソッドはアニメーション終了後の一連の終了処理を行います。（ #4097 〜 4134 ）

  1. （#4098）その段階ではプロパティ値 e.now は e.end （ 既に設定済みの終了値 ） とします。
  2. （#4099）変化率 e.pos も 状態変数 e.state も共に 1 とすることによって、アニメーション進行中に既にこれらに代入されていた別の値 （ 共に 0 以上で 1 より小さい値 ） を上書きし初期化します。
  3. （#4100）以上の値によりブラウザ表示を更新します。これでアニメーションの最終形が描かれます。
  4. 次に、アニメーション終了処理、すなわちプロパティ値をアニメ開始前の値へ戻す初期化作業を行います。
    1. （#4102）まず、animete メソッドによって e.options.curAnim に登録済みの、今対象としているプロパティの値を true とします。これはそのプロパティのアニメーションが終わったことを意味する flag です。
    2. （#4104 〜 4107）次に、ローカル変数 done を用意して値を true とします。この変数は次の for ループコードとセットになって、animate メソッドの第 1 引数で指定した prop オブジェクトの全てについて、それぞれがアニメーションを終えたかどうかが検証するために使われます。

      ひとつでもアニメーションを終えていないプロパティがあれば done は false となり、#4109 〜 4131 は実行されないまま #4133 の false が e.custom メソッドに return されます。後処理を施さないまま step メソッドを終えてしまうわけです。（ ※ これで果たして良いのか、疑問があるのですが解消出来ていません。）

    3. （#4110 〜 4131）他方、上の #4104 〜 4107 において全てのプロパティのアニメーション終了が確認されれば、つまり done が true のままならば、#4109 の if 文が成立してそれに続くブロックが実行されます。このブロックではアニメの対象となったプロパティを、アニメ開始前のプロパティ値に復元する （ 初期化すると言っても良い ） 作業が行なわれます。
      1. （#4110 〜 4118）まず、e.options.display 値が空ではない場合の処理です。元々この値は animete メソッドの #3880 においてアニメ開始前の状態から待避／取得されています。もし、style.display があればその値が代入され、なければ算出スタイル値が代入されています。また、null 値以外の値とは、block、inline、inherit、none など display プロパティが取り得る値を指します。

        #4112 ではアニメ開始前に animate メソッドによって e.options.overflow に待避しておいた初期値を、対象要素の style.overflow プロパティに戻して復元します。

        次に、#4115 では、e.options.display に待避しておいた値を対象要素の style.display プロパティに戻します。その上で、#4116 〜 4117 では、対象要素の display プロパティ値が "none" ならば （ null ではなく "none" であることに注意!! ）、対象要素の style.display プロパティを "block" に書き換えます。
        この最後の処理は非表示になっている要素を強制的に「一旦」表示することになります。

      2. （#4121 〜 4122）ここで先の「一旦」と記した意味が明らかになります。もし animate メソッドにおいて e.hide メソッドの起動があった場合には、当該要素を隠蔽します。どうして「一旦 block 表示させておき、その直後に隠蔽する」という煩わしい処理を行う必要があるのか───それは未解明です。
      3. （#4125 〜 4127）animate メソッドにおいて e.show または e.hide メソッドが起動されていれば、e.options.curAnim オブジェクトに待避させておいた animate メソッドの第 1 引数のプロパティを巡回走査して、対象要素の style オブジェクトの当該プロパティ値を、e.options.orig オブジェクトの同一プロパティ名に格納しておいた値で上書きします。ここに e.options.orig オブジェクトには、e.show や e.hide メソッドによって、対象要素の style オブジェクトのアニメ前の当該プロパティ値が待避されています。───このような複雑な工程がどうして必要なのか未解明です。
  5. （#4130）最後に animate メソッドにおいてアニメ終了後に起動することを指定しておいた関数等を起動します。
■ e.step() メソッドコード
4093:　// Each step of an animation
4094:　step: function(gotoEnd){
4095:　　var t = now(); // 現在時刻を代入する。
4096:　　// gotoEnd があるか、t が所定時間よりも大きい場合には
4097:　　if ( gotoEnd || t >= this.options.duration + this.startTime ) {
4098:　　　this.now = this.end;
4099:　　　this.pos = this.state = 1;
4100:　　　this.update(); // 要素のカレントサイズを測る。
4101:　　　// curAnim の当該プロパティ値を true とする。
4102:　　　this.options.curAnim[ this.prop ] = true;
4103:
4104:　　　var done = true;
4105:　　　for ( var i in this.options.curAnim )
4106:　　　　if ( this.options.curAnim[i] !== true )
4107:　　　　　done = false; // trueでなければ
4108:
4109:　　　if ( done ) { // done===true ならば
4110:　　　　if ( this.options.display != null ) { // display が null 値でないならば
4111:　　　　　// Reset the overflow
　　　　　　　 // options の overflow 値を要素の overflow style 属性に代入する。
4112:　　　　　this.elem.style.overflow = this.options.overflow;
4113:
4114:　　　　　// Reset the display
　　　　　　　 // options の display 値を要素の display style 属性に代入する。
4115:　　　　　this.elem.style.display = this.options.display;
　　　　　　　 // display 値が none ならば
4116:　　　　　if ( jQuery.css(this.elem, "display") == "none" )
4117:　　　　　　this.elem.style.display = "block"; // block とする。
4118:　　　　}
4119:
4120:　　　　// Hide the element if the "hide" operation was done
4121:　　　　if ( this.options.hide ) // hide プロパティがあれば
4122:　　　　　jQuery(this.elem).hide(); // 隠す。
4123:
4124:　　　　// Reset the properties, if the item has been hidden or shown
　　　　　　 // hide 又は show プロパティがあれば
4125:　　　　if ( this.options.hide || this.options.show )
4126:　　　　　for ( var p in this.options.curAnim ) // curAnim オブジェクトを巡回走査
　　　　　　　　 // style 属性オブジェクトの p プロパティの値を options.orig[p] とする。
4127:　　　　　　jQuery.attr(this.elem.style, p, this.options.orig[p]);
4128:　　　　　
4129:　　　　// Execute the complete function
4130:　　　　this.options.complete.call( this.elem ); // complete 関数を実行する。
4131:　　　}
4132:
4133:　　　return false; // false を返す。
4134:　　} else {// 引数がないか、t が所定時間以下の場合には
4135:　　　var n = t - this.startTime; // 現在時刻とアニメ開始時刻との差を n に代入。
　　　　　 // n を継続時間で除した値を state に代入。state は 1 未満の値となる。
4136:　　　this.state = n / this.options.duration;
4137:
4138:　　　// Perform the easing function, defaults to swing
　　　　　 // easing 関数を実行する。それが指定されていなければ swing 関数を実行する。
　　　　　 // その時の引数は順に this.state, n, 0, 1, this.options.duration
4139:　　　this.pos = jQuery.easing[this.options.easing || (jQuery.easing.swing ? "swing" : "linear")](this.state, n, 0, 1, this.options.duration);
　　　　　 // 終了点から開始点を差し引いてから、easing 計算値を乗じた値を開始点に加算する。
4140:　　　this.now = this.start + ((this.end - this.start) * this.pos);
4141:
4142:　　　// Perform the next step of the animation
4143:　　　this.update(); // 次の段階へ進む。
4144:　　}
4145:
4146:　　return true; // true を返す。
4147:　}

▲ToTop

e.update() メソッド

引数：なし

返値：なし

機能：アニメが進行している要素のブラウザ表示を更新します。

このメソッドは animate メソッドから呼び出される一連のメソッドの最後に位置しています。名前の通り表示を更新するメソッドですが、大切なことはこのメソッドのどこにも display = none が存在しないことです。

このメソッドは、step メソッドから時々刻々伝達される、遷移しつつある大きさや不透明度の値を受け取り、それに従って要素の表示状態を更新する役目を負っているのであって、例え各種プロパティの表示サイズがゼロとなり、不透明度がゼロとなった場合でも、display 値を block 、inline などの （ none ではない ） 表示用の値に設定したままで機能します。決して none にはしません。このことをしっかり踏まえなければ成りません。

  1. （#4017） e.options.step オブジェクトが存在すれば、e.now と e を引数にして、アニメ対象要素からそれを起動します。

    animate メソッドの第 4 引数や completeプロパティに指定する関数が、アニメーションが終わってから起動されるのに対して、この e.options.step は、アニメションの途中で何かを行うためにユーザーが指定する関数です。進行中のアニメーションの状態変数 e.state が変化する度に、何かを行わせたい時に使用します。

    なお、このメソッドの指定方法は queue プロパティと同様に speed オブジェクトのプロパティとして { queue:false, step:function(){}, duration:duration,・・・・} のようになります。この step 関数を使えば、アニメ中の各状態毎に「アニメ進捗状況に関する情報を表示する」、「背景色や文字色を変える」などが可能となります。とは言え色替えはとても推奨できません。変わる度にディスプレイ画面がちらつくからです。

  2. #4151 〜 4171 によって jquery.js 読み込み時に speed と step プロパティが jQuery.fx オブジェクトに追加されます。 #4020 はそれを呼び出して使用する箇所です。

    ここに、jQuery.fx オブジェクトは #4001 〜 4009 において定義されているコンストラクタ関数オブジェクトで、そのインスタンス e を縦横に駆使してアニメーションが実現されていることはこれまで見てきたとおりです。

    では jQuery.fx オブジェクトに追加された speed と step の 2 つのプロパティと、インスタンス e との関係はどうなるのか、直ぐに疑問が湧いてきます。

    答えは簡単で、e インスタンスにはこれらのプロパティは登録されません。これらがいわゆるクラスプロパティだからです。

    一寸脱線しましたが、 #4020 では、e.step メソッドから渡された値を基に、この jQuery.fx オブジェクトのクラスプロパティを利用してブラウザ上で要素を表示します。

    jQuery.fx.step クラスプロパティには、#4158 〜 4170 により 2 つのメソッドが登録されています。jQuery.fx.step.opcity() と jQuery.fx.step._default() です。#4020 における引数 this が this の仕様から呼び出し元の e インスタンスを指していることを踏まえれば、4020行 は決して難解ではありません。但し、インスタンスメソッドである e.step とは全く別物であることに気をつけなければなりませんが...。

    前半の jQuery.fx.step[this.prop] は、アニメ対象プロパティ（ this.prop ）が opacity の時だけ true となり、jQuery.fx.step.opacity(this) を実行します。その結果、#4160 〜4162 によってアニメ対象要素の style オブジェクトの opacity プロパティが、fx.now となり、現在値の不透明度でアニメ対象要素が描画されます。（ elem をアニメ対象要素として、elem.style.opacity = fx.now となります。）

    他方、e.step メソッドから渡されたアニメ対象プロパティ（ this.prop ）が opacity でない場合には、後半部分の jQuery.fx.step._default(this) が実行されます。_default() メソッドは、アニメ対象要素に style 属性が存在し、しかも style[ this.prop ] が空でない場合には、 style[ this.prop ] に単位付きで fx.now を代入します。

    また、アニメ対象要素に style 属性が存在しない場合、あるいは存在しても style[ this.prop ] が空の場合には、当該要素の this.prop 属性値を単位なしで fx.now とします。

    文章化するとわかりにくいのですが、アニメ対象要素が width の場合を例示すれば、前者は elem.style.width = fx.now+"px" であり、後者は elem.width = fx.now ということです。

  3. update メソッドの最後では（#4022 〜 4025）、アニメ対象プロパティが height または width で、かつ、アニメ対象要素にスタイルオブジェクトが存在すれば、その display 値を block とします。

    このことの意味は、inline ではなく block にするということであり、決して none を block に変えることではありません。最初に触れたように、update メソッドは決してdisplay 値を none にすることはありません。飽くまでも「 表示 」を更新する役割を担っているからです。

4015:　// Simple function for setting a style value
4016:　update: function(){
　　　　 // options に step プロパティがあれば this.now と this を引数として
　　　　 // step を起動する。ここに step はユーザーが独自に指定するメソッドである。
4017:　　if ( this.options.step )
4018:　　　this.options.step.call( this.elem, this.now, this );
4019:　　// this を引数として jQuery.fx.step[this.prop] 関数
　　　　 // 又は jQuery.fx.step._default関数を実行する。
4020:　　(jQuery.fx.step[this.prop] || jQuery.fx.step._default)( this );
4021:　　// アニメ対象プロパティが height または width であって、
　　　　 // かつ、アニメ対象要素にスタイルオブジェクトが存在すれば
4022:　　// Set display property to block for height/width animations
4023:　　if ( ( this.prop == "height" || this.prop == "width" ) && this.elem.style )
4024:　　　this.elem.style.display = "block"; // style.display を "block" とする。
4025:　},

▲ToTop

FC2ブックマークに追加

jquery.js におけるアニメーションコードの解読 ( 5 )

jQuery().animate() メソッド───その 2（ 逐次実行と併行実行 ）

このエントリイでは animate メソッドによって、複数のアニメーションを起動する 2 つの方法について考察します。複数アニメーションを、1 つずつ順番に起動する方法と、恰も同時に引き起こされているかのように並行して表示する─── こうした 2 つの異なるアニメ起動方法について、その差異をもたらすコード進行過程を考えてみます。

アニメーションの逐次起動はどのように行われるか？

【 opt.queue!==false （ opt.queue が true か undefined の時 ）のコード進行 】

逐次実行アニメーションサンプル

本題に入る前に逐次実行アニメーションのサンプルを見てみます。

逐次実行アニメの一例

アニメの逐次実行とは、複数のアニメーションを 1 つずつ順番に実行することです。例えば、(1) 或るボックスを右に 200 ピクセル移動させ、(2) 背景色を変化させ、(3) 文字サイズ小さくしてからまた色を変更し、(4) 最後に文字サイズを大きくするアニメーションは以下のようになります。

なお、色は animate メソッドの操作対象外ですから、animate メソッドの引数である complete メソッドを利用してアニメートさせています。animate メソッドで作動させたアニメーションが終わる時に、色が変わるようにしたわけです。

　
逐次実行アニメ sample

上の逐次実行アニメーションのスタイルシートとスクリプトコードは以下のように作成しました。

■ スタイルシート
　#animTestIn722, #animTest2In722{
　　　width:200px;background-color:royalblue;
　　　border:2px white solid;font-size:1em;
　　　margin-left:100px;
　}

■スクリプトコード
var goSequential = function(){
　$("#animTestIn722").animate({marginLeft:"+=200px"},2000,
　　function(){$(this).css({backgroundColor:"darkgreen"});})
　　.animate({fontSize:"0.75em"},2000,
　　function(){$(this).css({backgroundColor:"indigo"});})
　　.animate({fontSize:"1.5em"},2000,function(){$(this).text("逐次実行アニメ終了")});
}
var backSequential = function(){
　$("#animTestIn722")
　　.animate({fontSize:"0.75em"},2000,
　　　function(){$(this).css({backgroundColor:"darkgreen"});})
　　.animate({marginLeft:"-=200px"},2000,
　　　function(){$(this).css({backgroundColor:"royalblue"});})
　　.animate({fontSize:"1em"},2000,function(){$(this).text("逐次実行アニメ sample")});
}
var startSequential = function(){
　$("#animTestIn722").text("逐次実行アニメ sample")
　　.css({backgroundColor:"royalblue",marginLeft:"100px",fontSize:"1em"});
}
var endSequential = function(){
　$("#animTestIn722").text("逐次実行アニメ終了")
　　.css({backgroundColor:"indigo",marginLeft:"300px",fontSize:"1.5em"});
}
$("#btn1In722").click(function(){
　if ($(this).css("margin-left")!==100+"px") startSequential();
　goSequential();
});
$("#btn2In722").click(function(){
　if ($(this).css("margin-left")!==300+"px") endSequential();
　backSequential();
});
逐次実行アニメーションコードの解読

問題を単純化するために、まず、或るインスタンスから animate メソッドが初めて起動される場合を考えます。animate メソッドは非常に複雑なコード進行をするので、問題を単純化・細分化して考察する必要があるのです。

  1. animate メソッドの最初のサブルーチン speed メソッドが実行されると、opt.complete プロパティに、$(this).dequeue() と opt.old.call(this) の 2 つのメソッドが登録されます。なお、ここではあくまで登録が行われるだけで登録されたメソッドは実行されません。
  2. その後 $(this).queue メソッドが実行され、animate メソッドの唯一の引数である無名関数全体が、"fxqueue" 名で新たに関連づけられた配列に追加されます。これで関連づけ配列の要素は 1 つとなります。
  3. すると queue メソッドの定義により、queue メソッドによって当該配列に追加された当該無名関数が実行されます。
  4. そしてこの無名関数が実行されて初めて、アニメーションを具体化するコードの履行が進み、そのアニメーションコード進行の最後段階で opt.complete メソッドが起動されると、opt.old に登録済みの、animeteメソッドの第 4 引数である callback 関数（すなわちアニメ終了後に起動することを命じられていた関数）が実行されます。
  5. このとき opt.old に登録済みのもう 1 つのメソッドである $(this).dequeue() メソッドは、引数がないので、インスタンスの要素毎に $.dequeue(this) が起動されます。その結果、各要素に既に "fxqueue" 名にて関連づけられている配列から、最初の要素が削除されます。この削除される最初の要素とは、2. で追加された関数そのものです。また $.dequeue メソッドが第 2 引数なしで呼び出されるため、関連づけ配列の 2 番目の要素があれば実行されますが、それは存在しないので、 $.dequeue(this) メソッドは、関連づけ配列の第一要素を削除する以外のことは何もしません。
  6. こうして $() インスタンスから起動された最初のアニメーションが終わります。

▲ToTop

次に、以上に続けて、同一インスタンスに 2 番目の animate メソッドが適用される場合を考えてみます。特に先行するアニメーションが未だ進行中の段階で、2 番目の animate メソッドが起動される場合を考えてみます。

アニメーションの逐次起動とは、このような場合でも、後のアニメーションが起動されないことなのですから...

  1. animate メソッドの最初のサブルーチン speed メソッドが実行されると、opt.complete プロパティに、$(this).dequeue() 及び opt.old.call(this) が登録されます。登録されるだけで実行されないことも含めて最初のアニメーションの場合と何ら変わりません。
  2. その後、$(this).queue メソッドが実行され、animateメソッドの唯一の引数である無名関数が関連づけ配列に追加されます。これも上と同一です。異なるのは、最初のアニメーションが作動中ですから、関連づけ配列に登録された無名関数はこの時点で 2 つとなります。まだ 5. による最初の要素の削除は起こっていないのです。するとこの時点では関連づけ配列の要素数は 2 以上となるので、$(this).queue メソッドの定義から 2 番目の無名関数の実行は引き起こされず、$(this).queue メソッドは関連づけ配列に 2 番目の無名関数を追加しただけでその役割を終えます。
  3. こうして、2 番目の無名関数、すなわち 2 つめのアニメーションを実行する関数は「待機」状態となります。
  4. さて、その待機関数が実行されるのは、最初のアニメーションが終わろうとする段階です。それは上の 5. の段階です。この段階では、関連づけ配列の最初の要素（つまり最初の無名関数）が削除されます。しかしここでは、既に 2 番目の animate メソッドが起動済みで、2 番目の無名関数が関連づけ配列に登録済みとなっています。従って、最初の要素が削除された後の関連づけ配列には、1つの要素＝「2 番目に追加された無名関数」が存在しています。そして $.dequeue(this) メソッドは、関連づけ配列の要素数が 1 の場合にはその要素を実行します。
  5. こうして、2 つめのアニメーションを引き起こす無名関数が起動され、2 つめのアニメーションが引き起こされます。このようにして、前のアニメーションが終わってから、次のアニメーションが励起されるのです。

▲ToTop

アニメーションの並行起動はどのように行われるか？【 opt.queue===false の時 】

併行実行アニメーションサンプル

本題に入る前に併行実行アニメーションのサンプルを見てみます。

併行実行アニメの一例

アニメの併行実行とは、複数のアニメーションをほぼ同時に実行することです。例えば、(1) 或るボックスを右に 200 ピクセル移動させながら、(2) 併行して文字サイズ大きくするアニメーションは以下のようになります。

但し、そもそも色は animate メソッドの操作対象外ですから、色は併行起動できません。animate メソッド内の complete メソッドを利用して逐次起動せざるを得ません。

　
併行実行アニメ sample

上の併行実行アニメーションのスクリプトコードは以下のように作成しました。（スタイルシートは上の逐次起動のものと同一であり、そちらに記載してあります。）

■ スクリプトコード
var goSidebyside = function(){
　$("#animTest2In722").animate(
　　{marginLeft:"+=200px"},{queue:false,duration:2000,easing:"swing",
　　　complete:function(){$(this).css({backgroundColor:"darkgreen"})}})
　　.animate({fontSize:"1.5em"},2000,function(){$(this).text("併行実行アニメ終了")});
}
var backSidebyside = function(){
　$("#animTest2In722")
　　.animate({fontSize:"1em"},{queue:false,duration:2000,
　　　complete:function(){$(this).css({backgroundColor:"royalblue"})}})
　　.animate({marginLeft:"-=200px"},2000,
　　　function(){$(this).text("併行実行アニメ sample")});
}
var startSidebyside = function(){
　$("#animTest2In722").text("併行実行アニメ sample")
　　.css({backgroundColor:"royalblue",marginLeft:"100px",fontSize:"1em"});
}
var endSidebyside = function(){
　$("#animTest2In722").text("併行実行アニメ終了")
　　.css({backgroundColor:"darkgreen",marginLeft:"300px",fontSize:"1.5em"});
}
$("#btn3In722").click(function(){
　if ($(this).css("margin-left")!==100+"px") startSidebyside();
　goSidebyside();
});
$("#btn4In722").click(function(){
　if ($(this).css("margin-left")!==300+"px") endSidebyside();
　backSidebyside();
});
併行実行アニメーションコードの解読

解説書には「同時起動」と言う表現もありますが、以下に見るように複数のアニメーションを全く同時に引き起こせる訳ではありません。「先行するアニメーションが終わる前に、次のアニメーションを起動する」意ですから、正確には「並行」起動というべきでしょう。

さて、queue プロパティに何も指定しなければアニメーションは 1 つずつ逐次起動されますが、並行起動はユーザーが opt.queue の値を意図的に false としない限り引き起こせません。ここに opt オブジェクトの queue プロパティ指定は次のように行います。

animate メソッドの第 2 引数 speed を { queue:false, duration:nn, easing:"xyz" } のようなオブジェクトとします。この方法によってのみ opt.queue を false に指定することが出来ます。

  1. この場合、speed メソッド内において opt.complete メソッドに登録されるメソッドは、opt.old.call(this) だけであって、$(this).dequeue() は登録されません。
    また、speedメソッド実行後に起動されるイテレータは $().queue メソッドではなく、$().each メソッドです。
  2. こうして、each メソッドが無条件で無名関数を実行しアニメーションが引き起こされます。
  3. そして当該アニメーションの最後の段階で opt.complete メソッドが起動されて、animate メソッドの第 4 引数に記述された callback 関数が実行され、アニメート終了後の何らかの操作が行われます。
  4. 次に同一インスタンスに登録された 2 つめの animate メソッドが、1 つ目の animate メソッドによるアニメーションが終わる前に起動された場合を考えます。この場合には。直上の 1. 〜 3. の過程が新しい animete メソッド内で進行します。すなわち dequeue メソッドは登録されず、たとえ先の animate メソッドが起動中であっても淡々と 2 つ目の無名関数が実行されます。こうして 1 つ目のアニメーションに並行して 2 つ目のアニメーションが引き起こされる訳です。
FC2ブックマークに追加

jquery.js におけるアニメーションコードの解読 ( 4 )

愈々、jquery アニメーションの中核をなす animate メソッドを解読します。なお、このメソッドは多くのサブルーチンを階層的に伴うので、その階層構造に見合った構成で記述します。

jQuery().animate(prop, speed, easing, callback)───その1

引数：順にアニメ用CSSオブジェクト、アニメ継続時間、easing、アニメ終了時の実行関数。但し、speed をオブジェクト形式で与える場合には第 3、第 4 引数はなし。

返値：jQueryインスタンス

機能：animateメソッドは言うまでもなく、アニメーションの中心的役割を果たすメソッドで、多くのサブルーチンを利用してアニメーションを実現します。

以下順にそのサブルーチンを見ていきます。

jQuery.speed(speed, easing, fn) クラスメソッド（ 起動元は#3866 ）

最初に、animate メソッドの引数をチェックし確定し、返値となるオブジェクトのプロパティを整理する jQuery.speed メソッドが登場します。このメソッドでは３つの引数の順番がどのように与えられても、そのデータ型などから内容が判断され、適正に処理されます。

引数：引数は全て animate メソッドから渡されます。

返値：オブジェクトで次の 5 つのプロパティを持ちます。 old、complete、queue、duration（= speed）、easing。この返値オブジェクトは変数 optall に代入されます。

機能：アニメーションの第 1 段階の情報整理を行います。

duration

ここにアニメーション継続時間 duration 値は 4 つのケース別に設定されます。

第 1 は jQuery.fx.off が true の時です。このときには duration 値がゼロになり、アニメーションは瞬時に履行されます。

一旦 jQuery.fx.off = true とすると、opt.duration 値がゼロになるので、同じ要素に登録されたそれ以降に起動される予定のアニメーションは、たとえ各々の継続時間がどのように指定されていようとも、全て duration 値はゼロとなり、全て瞬時に起動されます。言い換えれば全てが想定したアニメ後の状態になります。

なお、 jQuery.fx.off = true の指定は、アニメの継続時間をゼロにするのであって、アニメそのものを停止するわけではありません。アニメーションを停止させるメソッド $().stop() との差異に留意する必要があります。

jQuery.fx.off の値は引数などから与えられないので、ユーザーが外挿します。

第 2 は引数 speed が数値型の時です。このときには speed 値がそのまま opt.duration 値となります。（ opt は speed メソッド内のローカル変数。以下同様）

第 3 は引数 speed が数値型でもオブジェクト型でもない場合です。この場合 speed が "slow" ならば 600 が、"fast" ならば 200 が、speed がこれらのいずれでもない場合には 400 が、それぞれ opt.duration に代入されます。（#3976〜3977）

第 4 は、speed がオブジェクト型の時です。この場合には当該オブジェクトのプロパティである duration のプロパティ値が duration の値となるだけではなく、この形式で引数を指定する事によって初めて、併行起動のための指定（ options.queue = false ）やアニメーション途中で何かを行わせるメソッドの指定（ options.step メソッド）が可能となります。

アニメ完了後に実行する関数を登録し、実行する

speed メソッドの 1 つの重要な作用として、アニメ終了後に起動するメソッドを指定する役割があります。

speed メソッドは #3980〜3986 において、opt.old に animate メソッドの第 4 引数 callback を代入し、opt.complete に「 opt.queue が 未定義又は true ならば（つまりアニメを逐次起動する場合）dequeueメソッドを起動し、opt.old が関数ならばそれを実行する 」関数を登録します。

こうすることにより、opt.complete が実行されると 2 つ又は 1 つののメソッドが起動されます。dequeue メソッドが起動される場合には、当該要素に登録されている次の アニメーションが起動され、opt.old に登録されている callback（ 最初のアニメーション終了後に起動するよう登録されたもの ）が関数ならば、それが起動されます。

アニメを逐次起動するか、併行起動するか

更に重要なポイントがあります。それはアニメの逐次起動か、並行起動かの指定がここで行われていることです。animate メソッドの第 2 引数 speed をオブジェクト形式で与え、そのプロパティ queue をユーザーが false とします。この場合には第 3 及び第 4 引数は不要です。すると 3983 行の jQuery(this).dequeue() は opt.complete メソッドに登録されず、かつ jQuery(this).queue() ではなく jQuery(this).each() メソッドが起動されます。

これらの結果、、同一インスタンスの同一要素に登録されている別々のアニメーションの起動は相互に抑止されず、コード進行に応じて複数のアニメーションが並行的に起動されます。

他方、 opt.queue を 指定しないか true とすれば、3983 行の jQuery(this).dequeue() が opt.complete メソッドに登録され、かつ jQuery(this).each() ではなく jQuery(this).queue() メソッドが起動されます。

すると、同一インスタンスの同一要素に複数の animate メソッドが登録されている場合において、先行する アニメーション用メソッドが終わり opt.complete が呼び出され、その中にある jQuery(this).dequeue() が起動されるまでの間は、後に続く アニメーション用メソッドは起動を抑止され続けます。そして先行するアニメーション用メソッドによるアニメーションが終わり jQuery(this).dequeue() が実行されたその後に、後続するアニメーション用メソッドの内、最初に位置するそれが起動され、当該アニメーションが開始されます。

このように speed クラスメソッドと each または queue インスタンスメソッドの組み合わせによって、アニメの逐次起動か並行起動かが分岐処理されます。

▲ToTop

$().each 又は $().queueメソッド（起動元は#3868）

引数：1 つの function

返値：jQuery インスタンス

機能：このメソッドはアニメーションコード全体の 1 つの根幹的位置を占めています。インスタンスの個々の要素毎、ここのプロパティ毎に、それぞれ初期値、終了値、定期的変動値、経過時間等々を設定し、操作します。

jQuery.speed メソッドの返値を受け取った変数 optall の queue プロパティ値によって、処理が分岐されます。（ なお、animate メソッドの第 2 引数 speed をオブジェクト形式で与え、そのプロパティ queue をユーザーが与えない限り queue===true に指定したことと同意になります。queue をユーザーが与えた場合には、speed メソッドの返値オブジェクト optall のプロパティに queue が設定されます。）

optall.queue プロパティが false の場合には each インスタンスメソッドが起動され、引数である唯一の関数が無条件に実行されます。他方、optall.queue プロパティが未定義か true の場合には、queue インスタンスメソッドが起動され、その時点で当該要素に関連づけられている待ち行列配列が空ならば、引数である関数が実行され、配列が空でなければ、当該関数が配列の要素に追加されます（追加された関数はこのときには実行されません）。

このようにしてアニメーションの同時並行的実行と、順次実行がコントロールされることになります。

each 並びに queue インスタンスメソッドの定義から、いずれの場合もインスタンスに登録されている各要素ノードを対象にして、巡回処理を行います。以下はこの関数の処理内容です。

▲ToTop

1. ローカル変数定義（#3870-3872）

第一引数 prop を処理するために必要なローカル変数を定義します。(1) optall から未定義プロパティを除いたプロパティを持つ opt、(2) hidden 属性の有無を登録する hidden、(3) jQuery インスタンスに格納されている要素ノードを指し示す self などが定義されます。

2. 第一引数であるpropオブジェクトの走査その1（#3875-3877）

第一引数 prop はオブジェクト形式で与えます。そのプロパティ値が hide で、変数 hidden が存在する場合（つまり当該要素は隠蔽済みとなっている）、あるいは、プロパティ値が show で変数 hidden が存在しない場合（つまり当該要素は表示済みとなっている）には、opt.complete に登録されている関数を実行します。

これは hidden 変数の値からアニメ処理が完了したと見なして、アニメ完了後のメソッドを起動するものです。

なお、opt.complete には queue 値に応じて 2 つまたは 1 つの関数が登録されていること、これによりアニメの同時並行進行か、逐次進行かが左右されることを改めて思い出すべきでしょう。（詳細は speed メソッドの項を参照）

3. 第一引数であるpropオブジェクトの走査その2（#3878-3889）

プロパティ名が height か width の場合で、当該要素が style 属性を有する場合、opt.displayプロパティに style.display 値または算出 display 値を代入し、また、style.overflow 値を opt.overflow に代入します。これらの操作は、当該要素の display プロパティと overflow プロパティの初期値を、opt オブジェクトに記憶させるもので、アニメ完了後にこれらのプロパティを初期化するときに使用します。

ここにおいて留意すべき点は、後者は styleオブジェクトのプロパティ値に限定されますが、前者は算出スタイル値の場合もあるということです。算出値と定義値との使い分けと区別は、以後にもたびたび登場しますが、animate メソッドを理解する上で重要なポイントです。

代入された opt.overflow 値が null 値でなければ、つまり overflow 値に何らかの値が定義されていれば、要素ノードの style.overflow 属性値を hidden とします。これはIE6以前のバージョンに対するバグ対策です。（ 参照 → 要素のはみ出しの処理の不具合（IE/overflow）：スタイルシート（CSS）辞典 - HTMLタグボード）

4. prop オブジェクトの複写・待避（#3890-3891）

prop オブジェクトの未定義以外のプロパティを、opt オブジェクトのプロパティ curAnim に複写待避します。これは初期値を保存する処置であり、アニメ終了時にここで複写された値が利用されます。

▲ToTop

5. propオブジェクトをそのプロパティ毎に走査しアニメーションを描画する（#3892-3925）

jQuery インスタンスの各要素を巡回処理する中で、それぞれの要素毎にその prop オブジェクトのプロパティを巡回処理します。つまり二重の巡回処理を行うのですが、このシーンで、愈々 jquery アニメーションの肝とも言うべき jQuery.fx クラスが登場します。

5-1. jQuery.fx インスタンスの生成（#3892）

jQuery.fx クラスのインスタンス e を作り、その各プロパティを利用してアニメーションを実現しますが、まず fx クラスの定義（#4002-4009）により、次の 3 つの引数が e のプロパティとなります。

(1) e.elem = self（各要素）、(2) e.options = opt（duration、easing、old、complete、display、curAnim、及び queue の各プロパティから成るオブジェクト）、(3) e.prop = name（propオブジェクトのプロパティ名）です。

これらの 3 つのプロパティの他に、fx インスタンスには、#4013-4149 において prototype オブジェクトが定義され、update、cur、custom、show、hide、step の各メソッドが付加され、更に #4151-4171 において speeds と step というクラスプロパティも設定されます。これらについては後述しますが、同一の単語が異なる意味で使われたり、メソッド内で別のメソッドが呼び出される多重構造になっているため、jQuery.fx インスタンス e は非常にわかりにくくなっています。

5-2. propオブジェクトのプロパティ巡回の中で、その値が toggle、show または hide の場合の処理（#3895-3896）

(1) そのプロパティ値が toggle で当該要素に hidden 属性があれば、e.show(prop) メソッドが実行され、(2) そのプロパティ値が toggle で当該要素に hidden 属性がなければ、e.hide(prop) メソッドが実行され、(3)そのプロパティ値が show ならば e.show(prop)を、hideならば e.hide(prop) が実行されます。

なお、ここで登場する e インスタンスの 2 つのメソッド、e.show(prop)、e.hide(prop) については後述します。

5-3. prop オブジェクトのプロパティ巡回の中で、その値が toggle、show 及び hideでない場合の処理（#3897-3919）

このブロックでは、prop の値が数値で指定されている場合、または toggle、show、hideでも数値でもない場合（具体的にどのようなプロパティ値の場合がこれに該当するのかは解明できていません）の対応が記述されています。

まず、数値指定の場合には、算出スタイル値を変数 start に、prop オブジェクトのプロパティ値を変数 end に、それぞれ単位付きで登録します。ここで初期値と終了値が登録されます。px 以外の単位指定がされている場合には、指定された単位表現に叶う値に start 値が換算され、相対加減値指定（+= や -=）の場合にも対応しています。

こうして得られた start、end 及び unit の 3 つの引数を伴って e.custom メソッドが起動されます。

また prop の値が数値でもない何らかの値（valとする）の場合には、start（ #3899 により算出スタイル値が入っているはず ）、val 及び空文字をの 3つを引数として e.custom メソッドが起動されますが、具体的にどのようなプロパティがこうしたケースに該当するのか未解明です。

■ $().animate メソッド
3865:　animate: function( prop, speed, easing, callback ) {
　　　　 // speed メソッドの返値 (object) を optall に代入する。
3866:　　var optall = jQuery.speed(speed, easing, callback);
3867:　　// queue が false ならば each メソッドを、さもなければ queue メソッドを実行
3868:　　return this[ optall.queue === false ? "each" : "queue" ](function(){
3869:　　　// 変数定義 opt には optall のプロパティの内未定義ではないものが代入される。
3870:　　　var opt = jQuery.extend({}, optall), p,
　　　　　　 // イテレートの都度 hidden 属性の有無を hidden に登録する。
3871:　　　　hidden = this.nodeType == 1 && jQuery(this).is(":hidden"),
3872:　　　　self = this;
3873:　
3874:　　　for ( p in prop ) { // prop オブジェクトを走査
　　　　　　 // プロパティ値が hide で hidden が true、または
　　　　　　 // プロパティ値が show で hidden が false ならば
3875:　　　　if ( prop[p] == "hide" && hidden || prop[p] == "show" && !hidden )
　　　　　　 　// opt オブジェクトの complete メソッドを呼出しを返す。
3876:　　　　　return opt.complete.call(this);
3877:　　　　// プロパティ名が height か width で style 属性があれば
3878:　　　　if ( ( p == "height" || p == "width" ) && this.style ) {
3879:　　　　　// Store display property
　　　　　　　 // opt.displayプロパティに display 値を代入する。
3880:　　　　　opt.display = jQuery.css(this, "display");
3881:
3882:　　　　　// Make sure that nothing sneaks out
3883:　　　　　opt.overflow = this.style.overflow; // overflow 属性値を代入する。
3884:　　　　}
3885:　　　}
3886:
3887:　　　if ( opt.overflow != null ) // nullでなければ
3888:　　　　this.style.overflow = "hidden"; // overflow 値を hidden とする。
3889:　　　// 引数 prop の未定義値でないプロパティを opt.curAnim に代入する。
3890:　　　opt.curAnim = jQuery.extend({}, prop);
3891:　　　// prop オブジェクトのプロパティ毎に走査
3892:　　　jQuery.each( prop, function(name, val){
　　　　　　 // $.fx クラスのインスタンス e を作る。
3893:　　　　var e = new jQuery.fx( self, opt, name );
3894:　　　　// プロパティ値に toggle、show、又は hide がある場合には
3895:　　　　if ( /toggle|show|hide/.test(val) )
　　　　　　　 // val が toggle で hidden が true ならば e.show(prop) を実行し、
　　　　　　　 // val が toggle で hidden が false ならば e.hide(prop) を実行し、
　　　　　　　 // val が toggle でないならば e.val(prop) を実行する。
3896:　　　　　e[ val == "toggle" ? hidden ? "show" : "hide" : val ]( prop );
3897:　　　　else { // プロパティ値に toggle、show、及び hide がない場合には
　　　　　　　 // valを文字列に変換してから match メソッドで調べ、最初に見つかる
　　　　　　　 // +=数値 又は -=数値 、あるいは数値を変数 parts に代入する。
3898:　　　　　var parts = val.toString().match(/^([+-]=)?([\d+-.]+)(.*)$/),
　　　　　　　 　　// e.cur(true) 実行結果があれば、変数 start にそれを代入する。
　　　　　　　 　　// ここに e.cur(true) は、jQuery インスタンスに登録されて
　　　　　　　 　　// いる各要素が持つ、当該プロパティ名のタグ属性値または
　　　　　　　 　　// カレントスタイル値を px 単位で取得するメソッドである。
3899:　　　　　　　start = e.cur(true) || 0; // なければ 0を代入する。
3900:
3901:　　　　　if ( parts ) { // parts が存在すれば
3902:　　　　　　var end = parseFloat(parts[2]), // /[\d+-.]+/ の値を変数 end に 代入。
3903:　　　　　　　　unit = parts[3] || "px"; // 単位名称を 変数 unit に代入。
3904:　　　　　　// start 値を所定の単位に基づく値に変換する。
3905:　　　　　　// We need to compute starting value
3906:　　　　　　if ( unit != "px" ) { // 単位名が px でない場合
　　　　　　　　　 // 数値と単位名を連結して end 値に対応する name スタイル値を設定する。
3907:　　　　　　　self.style[ name ] = (end || 1) + unit;
　　　　　　　　　 // 所定単位による end値 を px 単位による end 値【e.cur(true)】で除し、
　　　　　　　　　 // その比率に px 単位による start 値を乗じて所定単位の start 値を得る。
3908:　　　　　　　start = ((end || 1) / e.cur(true)) * start;
　　　　　　　　　 // 所定単位値で name スタイル値を設定する。
3909:　　　　　　　self.style[ name ] = start + unit;
3910:　　　　　　}
3911:
3912:　　　　　　// If a +=/-= token was provided, we're doing a relative animation
3913:　　　　　　if ( parts[1] ) // 相対加減値が指定されている場合には
　　　　　　　　　 // start 値に end 値を加減する。
3914:　　　　　　　end = ((parts[1] == "-=" ? -1 : 1) * end) + start;
3915:
3916:　　　　　　e.custom( start, end, unit ); // custom メソッドを起動
3917:　　　　　} else // parts が存在しない場合
3918:　　　　　　e.custom( start, val, "" ); // end 値は val で、unit はなしでcustom起動
3919:　　　　}
3920:　　　}); // each メソッド終了
3921:
3922:　　　// For JS strict compliance
3923:　　　return true;
3924:　　}); // ＃3868 の each or queue メソッド終了
3925:　},
FC2ブックマークに追加

jquery.js におけるアニメーションコードの解読 ( 3 )

このエントリイでは、jquery アニメーションで活用される基本的な次の 5 つの関数やメソッドを解読します。

genFx、show、hide、toggle、fadeTo

genFx( type, num )

引数：第 1 引数の type には show 、hide 又は toggle を代入し、第 2 引数 num には 1〜3 を代入して利用します。

返値：オブジェクト

機能：配列 fxAttrs からプロパティ名を CSS style 属性名、プロパティ値を type とするオブジェクトを生成します。

この関数は、要素を 「非表示 → 表示へ」、「表示 → 非表示へ」、「表示/非表示の循環」とアニメートさせるために、animate メソッドの第 1 引数である prop オブジェクトを作成するものです。CSS スタイル値を toggle、show、hide とするので最初は違和感があります。しかし、アニメーションの全容を理解すれば、この関数の必要性や重要性が理解できます。

■genFx( type, num ) 関数コード解読
3765:var elemdisplay = {}, // トップレベルで 3 つの変数を定義する。
3766:　timerId,
3767:　fxAttrs = [
3768:　　// height animations
3769:　　[ "height", "marginTop", "marginBottom", "paddingTop", "paddingBottom" ],
3770:　　// width animations
3771:　　[ "width", "marginLeft", "marginRight", "paddingLeft", "paddingRight" ],
3772:　　// opacity animations
3773:　　[ "opacity" ]
3774:　];
3775:
3776:function genFx( type, num ){
3777:　var obj = {};
　　　 // each 適用対象は num==1 ならば ["height",･･･,"paddingBottom"]、
　　　 // num==3 ならば ["height",･･･,"paddingBottom","width",･･･,"opacity"] となる。
3778:　jQuery.each( fxAttrs.concat.apply([], fxAttrs.slice(0,num)), function(){
3779:　　obj[ this ] = type; // each 適用対象ごとに type 値を代入し、
3780:　});
3781:　return obj; // obj={ height:type, marginTop:type, ･･･} となる。
 　　　// つまり、返値は CSS style 属性名をプロパティ名とし、
 　　　// type をプロパティ値とする複数のプロパティからなるオブジェクトとなる。
3782:}

▲ToTop

jQuery().show(speed,callback)

引数：アニメの継続時間、アニメ終了後に起動させるcallback 関数

返値：jQuery インスタンス

機能：言うまでもなく jQuery インスタンスに登録されている要素を表示させるメソッドです。

要素の display プロパティ値は、block だけではなく inline やその他の指定もあります（ inline-block、table、inline-table 等々 ）。ですから、「このメソッドは引数を与えなければ、単に display="block" とするだけの単純な関数だろう」との推測は、見事に裏切られてしまいます。

コードは２つの部分から成り、引数がある場合には animate メソッドが起動されますが、その解説は animate メソッドの項に譲り、ここでは引数がない場合の show メソッドの進行を跡付けます。

show メソッドの要点

第一は、hide メソッドも同様ですが、当該メソッドが同一インスタンスに対して複数回呼び出された場合の対応についてです。2 度目以降の呼び出しに対して省力化の仕組みが組み込まれており、そのことやその意義を理解する必要があります。

第二は、display プロパティについて、その算出（ IE の場合には「カレント」と呼ぶことが多い）スタイル値と style オブジェクトのプロパティ値の区別を理解しなければならないということです。明示的なスタイル設定と暗黙裏に設定されるスタイル値は別物であることを踏まえなければなりません。

▲ToTop

以上のことを踏まえてコード進行を見てみます。

或る jQuery インスタンスに初めて show メソッドを適用する場合
  • あるインスタンスに対して初めて show メソッドを適用すると、jQuery.data メソッドの定義から、この時点では olddisplay 名で関連づけられた情報は存在しないので、style.display に空文字が代入されます（#3790-3792）。つまり this.style.display プロパティ値を初期化します。
  • 次に、jQuery.css メソッドにより当該要素の算出（カレント）display スタイル値を検証し、それが none だったら（#3794）トップレベル変数である elemdisplay オブジェクトの、当該要素のタグネーム名のプロパティ値の有無を調べます。この時、同一名称のタグに対して過去に show メソッドが呼び出されていなければ、このプロパティは存在していませんから、3800 行以下が履行されます。
    • 3800 行から3808 行では、show メソッドが対象としているタグ要素と同じ名称のタグを当該サイト内の body 部に追加し、そのカレントスタイル値を取得し、その値が none 以外ならばそのプロパティ値を、他方 none ならば "block" を、elemdisplay[ tagName ] に代入します。（#3808）
    • こうして elemdisplay[ tagName ]プロパティ値を利用するか、あるいはそれに none 以外のプロパティ値を代入した後に、インスタンスの各要素に olddisplay 名で display 値を関連づけます（#3811）。
    • ここに変数 display 値は、elemdisplay 値が存在した場合、すなわち同じタグ名称の他の要素に対して show メソッドが適用済みの場合（当該インスタンスタンス内の他の同一名称のタグに適用済みの場合を含む。対象としたインスタンス内のタグ名称が全て同じ場合には、２巡目以降の場合がこれに該当する）には、elemdisplay 値になります。
    • 他方、elemdisplay が存在しなかった場合には、当該サイト内において今対象としているタグ要素に暗黙裏に設定されている display スタイル値が、none ならば block に、none 以外であれば当該値（ block、inline等々 ）となります。
  • こうして当該要素にそれに相応しい display 値が与えられ、ブラウザがそれにより当該要素を描画し、ディスプレイ画面に表示させます。

▲ToTop

同じ要素に対して二度以上の show メソッドを適用した場合

次に、同じ要素に対して二度以上の show メソッドを適用した場合を跡付けます。

この場合には、既に一度目の show メソッド適用によって、変数 elemdisplay オブジェクトの当該要素と同一のタグネームプロパティ値が none 以外となっており、かつ当該要素には olddisplay 名で none 以外の display 属性値がテキスト文字列で関連づけられています。

この結果、3792 行により当該要素の style オブジェクトの display 値が none 以外の値に設定され、更に constant reflow を避けるために設けられた 3817 行により、再度 style.display 値が none 以外の block 等となります。

なお、constant reflow を直訳すれば「定期的な再流」ですが、これでは何のことか皆目分かりません。ネット検索してみましたが未解明です。

show インスタンスメソッドが複雑なコードになっている理由

ところで、当初は show メソッドは単純に if (this[i].style.display=="none") this[i].style.display="block" とするだけで用が足りると思っていましたから、どうしてこのように複雑なコードになっているのか、その理由をここで考えてみたいと思います。

まず、elemdisplay オブジェクトの存在意義です。どうしてトップレベルの変数に、対象としている要素と同一のタグネームプロパティを設け、その値を none 以外とするのでしょうか。あたかも同一タグ名称の要素の display プロパティ値を、1 つに統一する必要があるかのようです。

例えば、ある p タグの n 番目の要素（ p(n)と名付ける ）を show メソッドで表示させたとします。すると elemdisplay.p = "block" となり、p タグの n 番目以外の要素（ p(m)と呼ぶ ）に show メソッドを適用する場合には、#3799〜3809 がスルーされ、#3811 で olddisplay 名で文字列 block が p(m) に関連づけられ、最後に #3818 によって p(m) の display 値が block となり、ブラウザ上に p(m) 要素が表示されます。

append 行為を同一名称の要素に対して 2 度以上引き起こさせない効率化が目的なのかもしれません。但し、それ以外の目的があるかどうか、また、あるとすれば何かについては解明できていません。

次に、同一タグ名の要素を わざわざ append するのは何故でしょうか。

それは次のような理由によると考えられます。

body に対象要素と同一タグ名称の要素を追加し、その算出（カレント） display 属性を調べれば、そのサイトにおいて、当該タグがどのような display 値をとっているのか把握することが出来ます。この方法によって、当該タグがサイト内で有する算出（カレント）display 値を取得することにしたのでしょう。

これに対して、olddisplay 名による要素への none 以外の文字列の関連づけは、分かりやすいものです。jQuery.data メソッドを利用するのは、一度当該要素の display 属性値を none 以外に登録した要素に対して、二度目以降はこの登録済み文字列を利用して容易に display 値を同じ値に設定するためです。show メソッドにおいても hide メソッドにおいても、jQuery.data メソッドがしっかり活かされています。

■$().show メソッドコード解読
3785:　show: function(speed,callback){
3786:　　if ( speed ) { // 引数 speed が定義されていれば
 　　　　　// 「genFx("show",3 )を CSS スタイル値、speed をアニメ所要時間とし、
 　　　　　// callback 関数をアニメ終了後に起動する animateメソッドを、
 　　　　　// jQuery インスタンスから呼び出して実行し、その返値を返す。
3787:　　　return this.animate( genFx("show", 3), speed, callback);
3788:　　} else { // 引数 speed が未定義か null 値の時、インスタンスの個々の要素に対して
3789:　　　for ( var i = 0, l = this.length; i < l; i++ ){
　　　　　　 // olddisplay なる名称で各要素ノードに関連付けられている値を取り出す。
　　　　　　 // 関連づけられた値がない場合には old = false となる。
　　　　　　 // 当該要素ノードに対する初めての show() 適用時には old は false と
　　　　　　 // なるが、二度目以降の呼び出し時には 3811 行で関連づけが定義済みなので
　　　　　　 // old = "block" となる。
3790:　　　　var old = jQuery.data(this[i], "olddisplay");
3791:　　　　// old があれば各要素ノードの display スタイル値に old を、
　　　　　　 // old が false ならば null を代入する。
3792:　　　　this[i].style.display = old || "";
3793:　　　　// 各要素ノードの display スタイル値が "none" ならば
3794:　　　　if ( jQuery.css(this[i], "display") === "none" ) {
3795:　　　　　var tagName = this[i].tagName, display; // ローカル変数定義
3796:　　　　　// 当該要素ノードに対する初めての show() 適用時には
　　　　　　　 // elemdisplay[ tagName ] プロパティは存在していないが、二度目以降の
　　　　　　　 // 呼び出し時には 3808 行で定義済みなので存在していることになる。
　　　　　　　 // elemdisplay オブジェクトに tagName プロパティがあれば、
3797:　　　　　if ( elemdisplay[ tagName ] ) {
3798:　　　　　　display = elemdisplay[ tagName ]; // display 値をその値とする。
3799:　　　　　} else { // elemdisplay オブジェクトに tagName プロパティがなければ
　　　　　　　　 // tagName と同じ名称の要素ノードを作成し、body 追加後に参照を取得する。
3800:　　　　　　var elem = jQuery("<" + tagName + " />").appendTo("body");
3801:　　　　　　// 追加したノードの display 属性を取得する。
3802:　　　　　　display = elem.css("display");
3803:　　　　　　if ( display === "none" ) // もしもその値が "none" ならば
3804:　　　　　　　display = "block"; // "block" に変更する。
3805:　　　　　　// body に追加したノードを削除し、
3806:　　　　　　elem.remove();
3807:　　　　　　// elemdisplay の tagName プロパティ値を display つまり "block" とする。
3808:　　　　　　elemdisplay[ tagName ] = display;
3809:　　　　　}
3810:　　　　　// 各要素ノードに olddisplay 名の display 値 つまり "block" を関連づける。
3811:　　　　　jQuery.data(this[i], "olddisplay", display);
3812:　　　　}
3813:　　　}
3814:
3815:　　　// Set the display of the elements in a second loop
3816:　　　// to avoid the constant reflow
3817:　　　for ( var i = 0, l = this.length; i < l; i++ ){
　　　　　　 // 各要素ノードの display スタイル属性を olddisplay 名で関連づけら
　　　　　　 // れている値（"block"）、又は null に設定する。
3818:　　　　this[i].style.display = jQuery.data(this[i], "olddisplay") || "";
3819:　　　}
3820:
3821:　　　return this; // インスタンスを返す。
3822:　　}
3823:　},

▲ToTop

jQuery().hide(speed,callback)メソッドの解読

引数：継続時間、callback関数

返値：jQueryインスタンス

機能：言うまでもなく jQuery インスタンスに属する要素を隠蔽させるメソッドです。

このメソッドにおいても引数が与えられた場合には、animate メソッドが利用されますがここでは触れません。引数がない場合のみ解読します。

ある要素に初めて hide メソッドを適用した場合

インスタンスの個々の要素に対して、最初に hide メソッドが適用された場合において、既に当該要素に show メソッドが適用されていれば、当該要素に olddisplay 名で関連づけられた情報は block や inline となっており、一度も show メソッドが適用されていなければ、当該要素に olddisplay 名で関連づけられた情報は存在しません。

つまり、#3830 の変数 old には、block、inline などのスタイル値か、又は undefined が代入されます。そして old が undefined 値の場合、!old==true となり、勿論 old!=="none" が成立します。

こうして事前に show メソッドが適用されていない要素に対して、初めて hide メソッドを適用した時には、#3832 が実行され、data メソッドと css メソッドにより、当該要素の style.display 値、または算出（カレント）display 値が、olddisplay 名で当該要素に関連づけられます。
（関連づけられる値は block、inlineblock、inline 等となりますが、if 条件から none だけはあり得ません。olddisplay 値は block や inline などの表示用の値となり、none となることは決してありません。）

show メソッドの後に hide メソッドを適用した場合、あるいは hide メソッドを二度以上適用した場合

他方、show メソッドが適用された後に hide メソッドを適用した場合や、同一要素に対して二度目以降の hide メソッドを適用した場合には、old は未定義ではなくなっていますから !old＝false となり、#3831〜3832 は実行されないまま、#3837〜3838 が実行され当該要素は非表示、あるいは非表示のママとなります。

上の行為の後に再び show メソッドを適用した場合

olddisplay 値は block や inline 等となっているので、3792 行により display 値はそのままとなります。よって #3794-3812 は通過し、3818 行が実行されて当該要素が表示されることになります。

■$().hide メソッドコード解読
3825:　hide: function(speed,callback){
3826:　　if ( speed ) { // speed があれば animate メソッドを実行する。
3827:　　　return this.animate( genFx("hide", 3), speed, callback);
3828:　　} else { // speed がないか null の時
3829:　　　for ( var i = 0, l = this.length; i < l; i++ ){
　　　　　　 // 各要素に olddisplay 名で関連づけられているデータを変数 old に代入する
3830:　　　　var old = jQuery.data(this[i], "olddisplay");
3831:　　　　if ( !old && old !== "none" ) // old が false か "none"でない時には
　　　　　　　 // 各要素ノードの display スタイル値を
　　　　　　　 // olddisplay 名で各要素ノードに関連づける。
3832:　　　　　jQuery.data(this[i], "olddisplay", jQuery.css(this[i], "display"));
3833:　　　}
3834:
3835:　　　// Set the display of the elements in a second loop
3836:　　　// to avoid the constant reflow
3837:　　　for ( var i = 0, l = this.length; i < l; i++ ){
3838:　　　　this[i].style.display = "none"; // 非表示を設定する。
3839:　　　}
3840:
3841:　　　return this; // インスタンスを返す。
3842:　　}
3843:　},
3844:

▲ToTop

jQuery().toggle(fn,fn2)

引数：fn,fn2

返値：jQueryインスタンス

機能：jQuery インスタンスに属する要素を表示/隠蔽させる循環メソッドです。

toggle メソッドはイベント処理にも登場します。それが最初の分岐（#3851）の２つの引数が共に関数の場合です。この場合には 3852 行が適用されてイベントの toggle 処理が行われます。

fn、fn2 が共に存在しない場合、あるいはいずれか一方以上が関数でない場合が、アニメ−ション処理で利用する toggle メソッドです。

アニメで利用する toggle メソッドは 2 つのケースに分かれます。

第 1 のケースは、fn、fn2が共に存在しない場合、あるいは第1引数が真偽値の場合です。このときにはインスタンスに登録されている各要素毎に次のことを行います。

  1. 最初の引数が真偽値で true ならばその値を state に代入します。
  2. bool がない場合（つまり引数が全くない場合）や、最初の引数が false の場合には、対象要素のhidden 属性の有無を調べ、あれば true、なければ false を state に代入します。つまり引数を全く指定しない場合や、fn == false と指定した場合には、当該要素の hidden 属性の有無によって、state に代入される値が決まります。hidden 属性があれば true、なければ false となります。（#3855）
  3. 次に、state が true ならば、jQuery(this).show() メソッドを実行し、false ならば、jQuery(this).hide() メソッドを実行します。（#3856）

第 2 のケースは fn、fn2 のいずれか一方以上が関数でない場合で、かつ最初の引数が真偽値でない場合です。このときには、"toggle" をアニメ用オブジェクトのプロパティ値とし、fn と fn2 を順に speed、easing として、インスタンスから animate メソッドを起動します。（#3858）この animate メソッドにおいて第 1 引数であるオブジェクトのプロパティ値を toggle とする場合の挙動は別途詳述します。

■ toggle インスタンスメソッド
3845:　// Save the old toggle function
3846:　_toggle: jQuery.fn.toggle,
3847:
3848:　toggle: function( fn, fn2 ){
3849:　　var bool = typeof fn === "boolean"; // fn が真偽値かどうかを bool に代入
3850:　　// (1)fn も fn2 も関数ならば_toggle メソッドを実行する。
　　　 　//（このケースはイベント処理時に登場する）
3851:　　return jQuery.isFunction(fn) && jQuery.isFunction(fn2) ?
3852:　　　this._toggle.apply( this, arguments ) :
　　　　 // (2)引数がない場合、あるいはfn か fn2 のいずれか１つ以上が関数でない場合には、
　　　　　 // (2-1)引数がないか、または fn が bool（真偽値）ならば
3853:　　　fn == null || bool ?
3854:　　　　this.each(function(){ //各インスタンス毎に
　　　　　　　 // bool が true ならば fn を、bool がない場合や false ならば当該要素の
　　　　　　　 // hidden 属性有無（true or false）を変数 state に代入する。
3855:　　　　　var state = bool ? fn : jQuery(this).is(":hidden");
　　　　　　　 // state が true ならば show メソッドを、
　　　　　　　 // state が false ならば hide メソッドをそれぞれ起動する。
3856:　　　　　jQuery(this)[ state ? "show" : "hide" ]();
3857:　　　　}) :
　　　　　 // (2-2)fn が null でもなく真偽値でもない場合animateメソッドを実行する。
3858:　　　　this.animate(genFx("toggle", 3), fn, fn2);
3859:　},

▲ToTop

jQuery().fadeTo()

引数：speed、to、callback

返値：jQueryインスタンス

機能：不透明度を to、speed を duration、callback をアニメ終了後に実行される関数とする、animate メソッドを起動します。

■ fadeTo メソッド
3861:　fadeTo: function(speed,to,callback){
3862:　　return this.animate({opacity: to}, speed, callback);
3863:　},

▲ToTop

FC2ブックマークに追加

jquery.js におけるアニメーションコードの解読 ( 2 )

これから jquery.js のアニメーションコードに関わる各種のメソッドを解読していきます。

最初に、アニメーションコードの随所に登場し、アニメーションの登録/解除/実行をコントロールするメソッドを扱います。

このエントリイで解読するメソッドは、jQuery.queue、jQuery.dequeue、
jQuery().queue、及び jQuery().dequeue の 4 つで、このエントリイの末尾に 4 つのメソッドの全コードとその解説を掲載しました。

jQuery.queue( elem,type,data ) クラスメソッド

引数：要素ノード、タイプ名称、data（一般に関数）

返値：配列（ data が配列ならばその各要素を要素とする配列、data が配列でないならば [data] ）

機能：タグ要素に data を要素とする待ち行列を type 名で関連づけ、関連づけた配列を返します。具体的にはアニメーションメソッドを登録したり、登録を削除するために使用します。

引数を使って説明すれば、elem 要素に type + "queue" 名で data を要素とする配列を関連づけ、かつその配列を返します。例えば data が animate メソッドなどの関数ならば、当該関数を要素とする配列が返されます。

なお、同一の elem に、同一の type 名で複数の data（ data は同一でも異なっても可）を関連づけることも出来ますし、同一の elem に異なる type 名で、同一または別の data を関連づけることも可能です。

このメソッドを複数回起動すると、その回数個数の data が type 名でインスタンスに関連づけられます。

また data 引数なしでこのメソッドを起動すると、type 名で elem に関連づけられている配列があれば当該配列（空配列も含む）が返されます。

▲ToTop

jQuery.dequeue( elem.type ) クラスメソッド

引数：要素ノード、タイプ名

返値：なし

機能：インスタンスの各要素に関連づけられている待ち行列から、その要素を取り出して実行するメソッドで、具体的にはアニメーションメソッドを実行するために使用します。

正確に言えば、type 名がない場合とそれが fx の時には、配列の最初の要素を配列から削除した上で、配列の２番目の要素に登録されていた関数を実行し、type 名が fx ではない別の文字列の時には、最初の要素を配列から削除した上で、削除した要素を実行します。

なお、関連づけられているデータが関数でない場合には何もしません。

例：
$.queue($("p").get(0),"te",function(){return alert("test")})
$.dequeue($("p").get(0),"te") // type!=="fx" だから test が alert される。

$.queue($("p").get(0),"fx",[function f1(){return alert("test1")},function f2(){return alert("test2")}])
$.dequeue($("p").get(0),"fx") // type=="fx" だから test2 が alert される。

$.queue($("p").get(0),"fx",function f3(){return alert("test3")},function f4(){return alert("test4")})
$.dequeue($("p").get(0),"fx") // test3 が alert される。（下記参照）
/* 2 番目の queue メソッドによって 2 つの関数が最初の paragraph 要素に関連づけられるが、
 * 2 番目の dequeue メソッドによって、関数 f1 は配列から除かれる。
 * そこで第 3 の queue メソッドを実行した時点において、 fx 名で最初の paragraph 要素に
 * 関連づけられている配列の要素は、f2 関数と、f3 関数の 2 つとなる。
 * （ 3 番目の queue メソッドの第 4 引数は queue メソッドの定義から無視される。）
 * その後に 3 番目の dequeue メソッドを実行すると、type =="fx" だから 配列の 2 番目の
 * 要素に登録されている関数 f3 を実行する。
 */

▲ToTop

jQuery().queue( type,data ) インスタンスメソッド

引数：タイプ名、data（一般には関数）

返値：配列またはjQueryインスタンス

機能：第 2 引数 data を与えた場合には、インスタンスに登録されている各要素毎に data を要素とする配列を関連づけ、或る条件下では関連づけた関数を実行します。一方、data を与えない場合には、要素に関連づけられた配列があればその配列を返します。
以上を一言にまとめれば、「dataを配列に格納してその配列を要素に関連づけ、場合によっては配列を返すか、配列要素である関数を実行する」と言ったところでしょうか。

  1. type が文字列型でない場合（引数が全く存在しない場合、つまり type == undefined の場合も含む）には、それを data に代入して、type には fx を代入します。つまり引数で与えた data は type に置き換えられます。
    その上で data が undefined の場合、つまり引数が全くない場合には、最初のインスタンスに type 名で関連づけられた配列があればそれを返し、関連づけられた配列がなければ空配列を返します。
    特徴的なことは返値がインスタンスではなく配列であることです。
  2. type が文字列でない場合で、data （それは既に type に置き換えられている）があれば、インスタンスの各要素毎に data を要素とする配列を type 名で関連づけ、各要素毎に待ち行列配列を作成します。このとき (1)type 名が fx で、かつ(2)待ち行列の要素数が 1 で、(3)当該要素が関数ならば、当該関数を実行した上で、インスタンスを返します。
    他方、type 名が fx でないか、あるいは配列の要素数が０か２以上の場合には関数を全く実行せず、単にインスタンスを返します。
  3. type が文字列で data がなければ 1．のケースと同様に配列を返します。
  4. type が文字列で data があれば、待ち行列を作成します。しかし当該の文字列が "fx" でなければ、要素に type 名で data を要素とする配列を関連づけるだけでこのメソッドを終了します。他方、当該文字列が "fx" ならば、登録された配列要素数が１でその要素が関数の時だけ、その関数を実行します。

具体的には animate メソッド内で jQuery().queue メソッドが利用されますが、その際の引数は唯一の関数しかないので、当該関数が data に代入され、type=="fx" となります。こうして、インスタンスの各要素に関連づけられた当該関数が 1 つだけの場合には、当該関数が実行されます。

なお、登録されている関数が既に 1 つ以上ある場合には、関数は実行されず配列内に登録されるだけです。

また、jquery.js には空配列だけを引数として jQuery().queue メソッドが利用されるシーンもあります。この場合には、上記 3. から type="fx"、data=[] となり、待ち行列の要素数はゼロですから、何も実行されません。但し、このときにはタグ要素に fx 名で関連づけられている配列は空配列となります。つまり、 jQuery().queue([]) を実行すると登録メソッドが削除されてなくなります。

▲ToTop

jQuery().dequeue( type ) インスタンスメソッド

引数：type

返値：インスタンスの個々の要素毎に jQuery.dequeue(this,type) を実行します。

機能：type 名がないか、それが fx の時には、配列の最初の要素を削除した上で、新たに最初の要素となった関数（それは削除前には配列の２番目の要素に登録されていた）を実行し、type 名が fx でない場合には、最初の要素を配列から削除した上で、その関数を実行します。なお、関連づけられているデータが関数でない場合にはこのメソッドは何もしません。

--------------------------------------------------------
■$.queue ＆ $.dequeue メソッドコード解読
1271:jQuery.extend({ // jQuery オブジェクトの拡張
･････････････
　　　 // これは、ノードに data を要素とする配列を関連づけ、、かつ関連づけられた 
　　　 // 配列を返すメソッドである。dataは関数であることを暗黙の前提としているが、
　　　 // このメソッドではその関数を実行することはない。あくまでも登録するだけである。
1339:　queue: function( elem, type, data ) {
1340:　　if ( elem ){
1341:　
1342:　　　type = (type || "fx") + "queue"; // ex."fxqueue"
1343:　　　// 要素 elem に type 名で関連づけられた値を返す。
1344:　　　var q = jQuery.data( elem, type ); // 返値は配列または未定義値となる。
1345:　　　// q が 未定義か、または 第 3 引数 data が配列ならば
1346:　　　if ( !q || jQuery.isArray(data) )
　　　　　　 // elem に type 名で jQuery.makeArray(data) を関連づける
　　　　　　 // q には jQuery.makeArray(data) が代入される。
1347:　　　　q = jQuery.data( elem, type, jQuery.makeArray(data) );
1348:　　　else if( data ) // q が存在するか、配列ではない第 3 引数 data が
1349:　　　　q.push( data ); // ある場合には配列 q に data を格納する。
1350:　　　// 以上の結果 q は必ず配列型の変数となる。
1351:　　}
1352:　　return q; // elem があろうがなかろうが、兎に角 q を返す。
　　　　 // data が未定義の時には q は空配列となる。
　　　　 // なお、elem がないときには明らかに return q; がエラーを引き起こす。
　　　　 // （Error：ReferenceError: q is not defined）
1353:　},
1354:　// $.queue により elem に関連づけられた data（関数）を実行するメソッド
　　　 // 但し、type が fx の時などには、２番目の data を実行することに留意。
1355:　dequeue: function( elem, type ){
1356:　　var queue = jQuery.queue( elem, type ), // queue = [data] or []
1357:　　　　fn = queue.shift(); // queue の最初の要素を削除し、それを fn に返す。
1358:　　　　// 最初の要素がない場合には fn は false となる。
1359:　　if( !type || type === "fx" ) // type がないか "fx" ならば、
1360:　　　fn = queue[0]; // 1356行の変数 queue の２番目の要素
1361:　　　
1362:　　if( fn !== undefined ) // fn が定義されていれば fn を実行する。
1363:　　　fn.call(elem); // fn が未定義ならば何もしない。
1364:　}
1365:});
■$().queue ＆ $().dequeue インスタンスメソッドコード解読
1367:jQuery.fn.extend({ // jQuery インスタンスのプロトタイプを拡張する
･････････････
1392:　queue: function(type, data){ // このメソッドは条件によっては関数を実行する。
1393:　　if ( typeof type !== "string" ) { // type が文字列でないならば
1394:　　　data = type; // type 値を data に代入し
1395:　　　type = "fx"; // type 値を "fx" とする。
1396:　　}
1397:　　// (1)data が未定義の場合
1398:　　if ( data === undefined )
 　　　　　// type 名で最初のインスタンスに関連づけられている配列を返す。
 　　　　　// 既に関連づけられている待ち行列配列がない場合には空配列が返される。
1399:　　　return jQuery.queue( this[0], type );
1400:　　// (2)data が定義されている場合
1401:　　return this.each(function(){ // jQuery インスタンスを返す。
　　　　　 // jQuery インスタンスの個々の要素毎に待ち行列配列 queue を作成する。
1402:　　　var queue = jQuery.queue( this, type, data );
1403:　　　// もし type が fx で配列 queue の要素数が 1 ならば
1404:　　　if( type == "fx" && queue.length == 1 )
1405:　　　　queue[0].call(this); // 関数 queue[0] を実行する。
　　　　　 // type 名が fx でないか、待ち行列 queue の要素数が 0 か 2 以上の場合には
　　　　　 // 何もせずに jQuery インスタンスが返される。
1406:　　});
1407:　},
1408:　dequeue: function(type){
1409:　　return this.each(function(){ // jQueryインスタンスの個々の要素毎に
1410:　　　jQuery.dequeue( this, type ); // type 名で登録されている関数 data を実行する。
1411:　　});
1412:　}
1413:});
FC2ブックマークに追加

jquery.js におけるアニメーションコードの解読 ( 1 )

jquery.js におけるアニメーションコードの全容解明のために、まずは基本的事項から認識を深めていこうと思います。

Javascript によるアニメーションとは何か

アニメーションとは、多数の静止画を所定の時間内で連続的に切り替えて「動き」を演出する一連の動作です。アナログ動画は Max 30 枚/秒の静止画から構成され、0.03 秒ごとに切り替わることにより動きを演出しますが、スクリプトによるアニメーションでも静止画の切り替えを連続的に行うことによって動きを表現します。

具体的には対象とするタグ要素の CSS スタイル属性値を、スクリプトから定期的に変化させてアニメーションを実現します。コンテンツの幅や高さなどの CSS スタイル値に、初期値、定期的増減値及び終了値の 3 つの値を与え、それらを時間軸上で処理することにより「動き」を演出します。

jquery.js ではアニメーションをどのように実現しているのか

jquery.js においてこのようなアニメーションを実現しているプロセスは以下のようになります。

  1. まずアニメーションが終わる状態である「 終了値 」を animate メソッドの第 1 引数 prop オブジェクトで指定します。animete メソッドでは他に引数として、アニメに必要となる easing、duration、並びにアニメ終了後に起動する callback 関数を指定し、結局これらの 4 つの引数によってアニメーションに係る全ての要素を指定します。

    なお、speed をオブジェクト形式で指定して、第 3 と第 4 引数を指定しない引数指定方法もあり、この方法によってのみ指定可能な値があります。queue と step メソッドです。

    queue は、同一要素の対する複数のアニメーションを、順次起動するか、並行的に起動するかを指定するプロパティです。queue を指定しないか true とすれば順次起動に、false とすれば並行的起動となります。

    step はアニメ進行中に何かを行わせる場合に指定するメソッドです。

    オブジェクト形式で指定する場合には、duration と easing もそのオブジェクト内の各プロパティとして指定します。

  2. アニメ−ション開始時の状態： 「 初期値 」 は、既にブラウザで描画済みの要素の状態から、e.custom メソッドによって取得します。

    ここに e は jquery.js 内部において、jQuery.fx コンストラクタから生成されるインスタンスです。

  3. アニメーションの定期的増減値は、初期値、終了値、easing関数、並びに開始時刻、継続時間及び現在時刻の6つの要因から e.step メソッドにより設定されます。

    なお、この e.step メソッドは、animate メソッドの第 2 引数をオブジェクト形式で指定して、そのプロパティで定義する step メソッドとは別物です。

  4. 最後に e.custom メソッドとその中から呼び出される e.step メソッドによって、必要な全ての値を取得し終えてから、e.update メソッドによって描画を更新します。

ここにおいて、以上の 2.〜4.、すなわち初期値設定から描画更新までのフローは、animate メソッドを起動した jQuery インスタンスの登録要素毎に、かつ指定した CSS プロパティ毎に何百回、何千回と繰り返されます。この二重のイテレートによってアニメーションが実現されていることを理解することが、animate メソッドを理解する大きなポイントです。

因みにこれらの連続して起動される一連のメソッドを図式化すると以下のようになります。 
$().animate(prop,speed,easing,callback){
　$().each(func(){ || $().queue(func(){ //イテレートその１（ 対象要素毎 ）
　　$.each(prop,func(name,val){ //イテレートその２（ CSSスタイルプロパティ毎 ）
　　　・val が toggle || show || hide
　　　　　　 　→ e.toggle || e.show || e.hide メソッド起動
　　　　　　　　　これらのメソッド内で最終的に e.custom メソッドが起動される
　　　・val がその他ならば　   　　　 → e.custom メソッドが起動される
　　　・e.custom ＝初期値を取得し、アニメ開始時刻を記録する。
　　　　　↓
　　　　・e.step ＝開始時刻からの経過時刻、その時点における CSS 値などを設定する。
　　　　　　↓
　　　　　・e.update ＝その時点の CSS 値に基づいて要素を表示する。
　　})
　});
};

▲ToTop

animate メソッドに登場するオブジェクトのプロパティ名一覧

animate は、CSSプロパティ値を頻繁に操作し、変化させるメソッドです。それらのプロパティ値を含むオブジェクトは animete メソッド内で複数個登場しますが、最終的には e インスタンスのプロパティに統合されます。

ですから、animeteメソッドを理解するには、オブジェクトとそのプロパティのそれぞれの役割を知ることが重要になります。

以下に、animate メソッドに登場する e インスタンスのプロパティとメソッド、並びに jQuery.fx のクラスプロパティを、簡略化した独自の表示形式で、最小限の説明を加えて羅列しておきます。

それぞれのプロパティの役割については、各メソッドの解読の中で行います。

■ e インスタンス ( コンストラクタは jQuery.fx )
 e = {
　elem：elem,// jQuery.fx の第 1 引数で、animete メソッドの起動元となる
　　　　　　 // jQuery インスタンスに登録されている要素
　prop:propName, // jQuery.fx の第 3 引数
　options: {
　　queue:false || true, step:function(){・・・}, // これらはユーザーが指定する。
　　old,complete,easing,duration,display,overflow,// animate メソッドから引き継がれる。
　　curAnim, // animate メソッドの第一引数である prop オブジェクトが格納される。
　　orig:{prop}, //同上であるが役割が異なる。
　　show:true || false || undefined, hide:true || false || undefined
　},
　startTime, start, end, unit, now, pos, state,
　// メソッド
　cur(), custuom(), step(), update(), show(), hide()
}

■ jQuery.fx コンストラクタのクラスプロパティ
 jQuery.fx.speeds = {"slow":600, "fast":200, _default:400}
 jQuery.fx.step = {opacity:fn(e), _default:fn(e)}
FC2ブックマークに追加

「jQuery でアニメーション」のための根本的学習をおこなわなければならない

それは行き詰まりに端を発する

自作 plug-in：animatedPopup は当初の目的を達したが、機能的には極めて限定的で稚拙であった。

もっと汎用的な運用が可能となるような設計にしなければ自ら使用する上でも、使いにくすぎる。

そこで jquery.js 、cycle.js、wtooltip.js の３つのコードとの睨めっこをゴールデンウィーク前から開始した。

jquery のアニメーションを根本から理解し尽くし、それを踏まえて cycle.js や wtooltip.js も理解して、jquery.js を利用したアニメーションの全容を把握しようとしたのである。

そのチャレンジを開始してから既に二ヶ月余りが経過したが、未だに全容解明までには至っていたい。

jquery.js や cycle.js のコードは難解だ

アニメーションに係る上の２つのコードは極めて難解である。何をどう処理しているのか、それさえ理解するのに非常に苦労してきた。

アニメの基本構造は CSS 処理であり、対象となる HTML 要素に対して、初期値、終了値、そして初期値から終了値までの変動処理、これらの３つのCSS値を操作すればよい。───という分かりきったことは当然理解しているつもりだった。

しかし、コトはそう単純ではなかったのである。

例えば、要素の位置や大きさ並びに透明度などの HTML 文書における指定は、img タグで一般的なように当該タグのタグ属性として設定することもあれば、CSS スタイルシートで指定する場合もある。また Javascript で指定することもある。これらの全てのケースを前提としたコードでなければアニメーションは自在に操ることが出来ないわけで、まずそのことを肝に銘じる必要があった。余りに当たり前となっていた「ブラウザによる描画の仕組み」を改めて再認識させられたのである。

また、jQuery.data() メソッド等による DOM ノードへの情報の関連づけが jquery.js アニメーションコードの重要な部分を構成しているが、これをきちんと理解しきることも必要だった。

更に言えば、jQuery().queue() メソッドなどにより、アニメーションを登録するという仕組みを理解しなければ、自在にアニメを操ることも出来ない。───ということを理解しきる必要もあった。

それでも解明しきらなければ先に進めない。

現在、全容解明には未だ至っていないものの、おそらく90％は理解できたと思えるところ迄到達している。もう少しの奮闘で「その山を登り切ること」が出来るであろう───と思える段階までやっと到達した。

今一歩奮闘しよう、と思っている。

FC2ブックマークに追加

jQuery Animation easing といえば「cycle」を語らずして...

Animation / easing といえば著名なプラグインは...

既に言及した Easing Plugin の他に著名なものといえば Cycle だろう。

このエントリイでは後者について言及したい。

Cycle はその筋では（苦笑）相当著名なプラグインだろう。

それは連続して画像を表示する各種アニメーションを提供する。しかもそのサイトでは様々なデモを具体的に掲示しており、 関連サイト では様々な新たな効果を適用したデモを見ることが出来る。

Cycle プラグインは「画像がサイクルする」ことから象徴的なネーミングとなったと思われるが、そのコードを解読することは、jquery.js を使用したアニメーションの学習にとって極めて有益である。

さて、そのコードは漸次改訂されており、当然のことながら改訂の都度行数が増えている。最新の ver 2.65（2009/4/7）は実に千行を超えるコードとなっているが、ver 2.09（2008/01/22） では 535 行だったから 1 年余りで倍の長さとなった。これは jquery.js の 1.3x 系登場を踏まえた改訂も盛り込まれているし、様々な形式の引数への対処を盛り込んだことなども増行の理由だろう。

いずれにしても、この Cycle プラグイン がアニメーションプラグイン作成の教科書となることは間違いない！

▲ToTop

Cycle に学ぶ Animation plug-in の特性

Cycle コードを吟味してみると、それは極めて特徴的な構造となっている。

すなわち、Animation のための CSS 設定において、(1) まず、デフォルト値をオブジェクト形式で設定しておき、(2) 次にそれにメソッドの引数を上書きし、(3) 更にそれを加工して、アニメ前、アニメ用、アニメ後のそれぞれの CSS 設定を作成する───という段取りをアニメーション起動の前に行っていることである。

こうした「作法」はツールチップ plug-in において人気の高い wtooltip.js plug-in でも全面的に採用されており、正確に言えばこの plug-in は Cycle plug-in の作法を踏襲したと言うことが出来るだろう。

翻って我流 plug-in ： animatedPopup を顧みれば、そのような「構造的な」作法は採用しなかった。そしてそのことがplug-inの機能拡張において障害にもなっている。

そこで、Cycle.js や wtooltip.js で採用されている構造的な作法を踏まえて、我流 plug-inを根本から見直し作成し直すべきであると、痛感しているのである。

「著名な」plug-in と同様な構造/作法を踏まえて作ることが、他者からも受け入れられるplug-inにも繋がるし、おそらくは関心も呼ぶことだろう。

▲ToTop

そんなことを感じている今日この頃なのである。

FC2ブックマークに追加

自作 jQuery プラグイン ：animatedPopup 後に別のアニメーションを連続起動する

ここのアニメーションは IE では動きません。

jquery.js を使用した Animation 連鎖にチャレンジ

animatedPopup 起動後に、続けて別の Animation を連続起動してみる。

jQuery では連続アニメーションを容易に実行させることが出来る。例えば animatedPopup による表示を終えた後に、その要素を例えば画面内で移動するとか、次第に不透明化しながら消滅させるとか。表示領域を縮小/拡大するとか、様々なアニメーションを連続起動させることが可能だ。

あるいはまた複数のアニメーションを同時に履行させることも出来る。更にアニメーション終了後に callback 関数を起動させて何らかの処理をさせることも可能だ。自作プラグイン animatedPopup の連続起動も行えるだろう。

このエントリイではそんな複数アニメーションの連続履行を試みる。

連続アニメ 1. animatedPopup 後の要素を画面内で移動する。

animatedPopup 関数起動が終了すると、ユーザーが隠蔽操作を行わない限り、その要素は画面内に表示され続ける。これを活かして当該要素を自在に画面内に移動させてみる。

表示するコンテンツは先のエントリイ同様に他サイトの写真素材を活用し、画面内を次のように移動させる。まず画面左上に animatedPopup 表示する。その後、slideUp、slideDown で遊んでから、画面内を右上 → 右下 → 左下と時計回りに連続して移動させ、最後に最初の位置に戻してから fadeOut させてみる。

移動速度は 0.5、1、1.5、2 秒と次第に遅くし、それぞれの動きを加減速する easing も微妙に変化させ、消滅には 2.5 秒を掛けてみた。

この一連の動きを実行するには、下のボタンをクリックするだけでよい。この一連の自動実行アニメーションを楽しんで（？）戴きたい。

（出典は pixta ）

▲ToTop

連続アニメ 2. animatedPopup 後複数のアニメーションを同時起動する。

今度は animatedPopup によるアイテム表示後に、それを画面内で横移動させながら、フェードアウトさせ、直ぐにフェードインさせ、その後上へ移動させてから消滅させる。

（出典は pixta ）

連続アニメ 3. 2つの animatedPopup とその後のアニメーションを活かしつつ、相互に連続起動する。

下のボタンをクリックすると上で定義した 2 つのアニメーションを連続実行する。もう一度同じボタンを押した場合には、連続実行の順番を変えて実行するようにした。

▲ToTop

ここで実現した連続アニメーションのコード解説

ここで行った連続アニメーション作成の過程において、animatedPopup プラグインは更に進化を遂げざるを得なかった。元々連続アニメーションを想定していない仕様だったからだ。

その拡張に関する詳細は別項にて述べるとして、ここではこのエントリイで実現した連続アニメーションのコードについてメモとして解説しておきたい。

連続アニメーションのコード作成過程において、jquery.js のアニメーションコードをますます深く学習せざるを得なかったし、作成途上でスクリプトに工夫を加えた箇所も多数に上ったからである。

■このエントリで実現した連続アニメーションのコード
　 // animatedPopup プラグインのインクルード
 1:(function(){var s=document.createElement('script');s.src='http://blog-imgs-31.fc2.com/h/k/o/hkom/my_Utilize_jQuery2.js';s.type='text/javascript';document.getElementsByTagName('head')[0].appendChild(s);})();
 　　// ボタンの色づけ
 2:　$(".btn711").css("backgroundColor","burlywood")
 3:　　.mousedown(function(){$(this).css("backgroundColor","plum")})
 4:　　.mouseup(function(){$(this).css("backgroundColor","burlywood").blur()});
　　 // 表示するコンテンツの作成
 5:　var contents0="次のアニメーションを起動します。";
 6:　var contents1='<img src="http://image.pixta.jp/image/thumb/51/14d687c77d91104811600b9d9916948a.jpg" width=450 height=301 />';
 7:　var contents2='<img src="http://image.pixta.jp/image/thumb/41/bf5a19a4278538425a476ed1e113f0a9.jpg" width=450 height=316 />';
 8:　// 画像先読み
 9:　$("<div></div>").css("display","none").prependTo(document.body).html(contents1+contents2);
10:
11:$(function(){
　　 // animatedPopup プラグイン終了後に履行する関数定義その１
12:　startAfterAnima = function(){
13:　　var ani1=$(window).width()-$(this).outerWidth()+"px";
14:　　var ani2=$(window).height()-$(this).outerHeight()+'px';
15:　　$("#dispElem").slideUp("slow").slideDown()
16:　　.animate({"left":'+='+ani1},500,"linear")
17:　　.animate({"top":"+="+ani2},{duration:1000,easing:"swing"})
18:　　.animate({"left":"-="+ani1},{duration:1500,easing:"easeInOutExpo"})
19:　　.animate({"top":"-="+ani2},{queue:true,duration:2000,easing:"easeInOutSine"})
20:　　.animate({"opacity":0},2500,"swing",function(){$(this).empty().hide().css({"opacity":1})});
21:　}
　　 // animatedPopup プラグイン終了後に履行する関数定義その２
22:　var startAfterAnima2 = function(){
23:　　var ani=$(window).scrollTop();
24:　　$("#dispElem").slideUp("slow").slideDown("slow")
25:　　.animate({"left":"0px"},{queue:false,duration:2000,easing:"swing"})
26:　　.fadeOut("slow").fadeIn("slow").animate({"top":ani},{queue:true,duration:2000,easing:"easeInOutSine"})
27:　　.animate({"opacity":0},2500,"swing",function(){$(this).empty().hide().css({"opacity":1})});
28:　}
29:　// 各ボタンクリック時の animatedPopup 起動
30:　$("#btn711-0").animatedPopup(contents0,["c","c"],1500,null,null,true);
31:　$("#btn711-1").animatedPopup(contents1,["l","t"],2000,"easeOutElastic",null,null,true,startAfterAnima);
32:　$("#btn711-2").animatedPopup(contents2,["c","c"],2000,"easeInOutExpo",null,null,true,startAfterAnima2);
　// 連続してanimatedPopup メソッドを起動する処理
33:　// 3 つのボタンの jQuery インスタンスを配列に登録
34:　var ary = [$("#btn711-0"),$("#btn711-1"),$("#btn711-2")];
　　 // 次のアニメーションを起動させる関数
35:　var nextFunc =function(jQelem){
36:　　if (!$("#dispElem").queue("fx").length){
37:　　　jQelem===ary[0] ? clearInterval(ival) : clearInterval(ival2);
38:　　　jQelem.trigger("click");
39:　　}
40:　}
41:　var ival,ival2;
　　 // 3 番目のボタンに対する toggle イベント定義
42:　$("#btn711-3").toggle(function(){
43:　　$(this).children(0).text("リゾートプール＋清水寺");
44:　　ary[1].trigger("click");
　　　 // ２つの待機関数を定義
45:　　ival = setInterval(function(){nextFunc(ary[0]);},1000);
46:　　ival2 = setInterval(function(){nextFunc(ary[2]);},1500);
47:　},function(){
48:　　$(this).children(0).text("清水寺＋リゾートプール");
49:　　ary[2].trigger("click");
50:　　ival = setInterval(function(){nextFunc(ary[0]);},1000);
51:　　ival2 = setInterval(function(){nextFunc(ary[1])},1500);
52:　});
53:});

▲ToTop

コード内に記述したコメントでかなり説明になっていると思うが、苦労した点を中心にメモしておきたい。

アニメーション同時進行

幾つかの箇所でアニメーションの同時起動を試みた。queue:false に設定している箇所が同時進行のためのコードで、具体的には移動しながら slideUp/Down を行わせた。

アニメーション終了後の別アニメーションの起動

jQuery の animate インスタンスメソッドの complete 属性を活用して、animatedPopup メソッドが終了した後に別のアニメーションを起動させた。#124-140 で定義した関数が complete プロパティ値となる関数である。

2 つの animatedPopup 連続起動に最も苦労した

animatedPopup プラグインは jQuery インスタンスとして定義した。そしてここで扱った 2 つの写真表示アニメーションは、それぞれの呼び出し元が別々のボタンであり、animatedPopup には巧みに返値を設定することが出来ていない。つまりメソッドチェーンが使えない。

そこで jquery.js の イベント処理メソッドとして定義されている trigger メソッドを使って、異なる呼び出し元から呼び出される animatedPopup メソッドを連続起動させるようにした。

さて要点はタイマー設定だ。単純に 2 つの animatedPopup を並べるだけでは最後のそれしか作動しないのだ。コード進行はアニメーション実行とは無関係に次行へ次行へと進んでしまうから、前のアニメーションを待つことなく次のアニメーションが起動されてしまい、結局最後のアニメーションだけが表示されるのだ。

このため或るアニメーションが動作している間は、次のアニメーションが起動されないようにしなければならない。

そこで、タイマーを使って次のアニメーション起動を抑制することにした。

そこで問題となるのは、アニメーションが進行中であることを Javascript インタープリタに知らせる方法だ。jQuery インスタンス毎に、メソッド queue("fx") に animation が登録されることを利用する方法が或る書籍に書いてあったのでそれを使ってみた。

2 つ以上の animatedPopup の連続起動を別の方法で行ってみる

もっと巧い方法はないのだろうか、と思いたち本家サイトを改めて眺めてみた。すると、極めて簡単な方法が実は存在していることを思い知らされた。それは jQuery インスタンスの add メソッドを利用するものだ。こんな風にaddメソッドが使えたのか！───と感心してしまった。

しかし、この方法は 1 つの絶対配置要素を使ってアニメーションを実現している animatedPopup では巧く採用することが出来ないでいる。

FC2ブックマークに追加

自作 jQuery プラグイン ：アニメーションポップアップ で遊ぶ

animatedPopup で他サイトの写真や動画を表示する。

完成した自作 jQuery プラグイン「 animatedPopup 」を実際に使ってその可能性を見極めてみようと思う。それはまたこのプラグインの PR にもなるだろう。

なお jQuery 本家サイトのプラグインサイトに登録してみたいが、英語解説を書く自信がないので行えないだろう。（苦笑）

さて、このエントリイでは、他サイトの写真や動画を幾つかポップアップしてみる。

但し、トップページを経由しないでダイレクトにアクセスすることを認めない素材サイトが結構多いため、ダイレクトアクセス が可能な Web サイトに限定して探さざるを得なかった。

全てボタンをクリックすれば、画面中心部に写真や動画がポップアップされるように設定した。但し jquery プラグイン animatedPopup はIEでは動かないことを断わざる得ない。

  • （出典は pixta ）easing は easeOutElastic を使用し背景色等はグレー系を指定
  • （出典は pixta ）easing は easeInOutExpo を使用し背景色等は既定値のママ
  • （出典は フォトライブラリー ）easing は easeInOutSine を使用し、背景色等は紫系を使用
  • （出典は LinkStyle ）easing はeaseInOutBack、背景色は赤系を使用
  • （出典は youtube ）easing は温和しめの swing、背景色は緑系を使用

上の5つの animatedPopup プラグイン活用事例において、次の点に着目してもらえれば幸いである。

  • 背景色とボーダー色・種類、並びに easing は５つそれぞれに変えた。
  • easing 所要時間は「夏の丘」： 1 秒、「地球と月」：1.2秒、「ライトシャワー」：1.4秒、「暮色」：1.5秒、動画：1.8 秒と変化させた。

なお、このアニメ−テッドポップアップのコードについては、以前のエントリイ で詳細に解説を加えたので、時間と興味があればそちらを見て戴きたい。

さて、上の５つの実行結果についてだ。

まず写真４枚は「一応」設定通りに動いてくれた。しかし動画は埋め込みタグ情報からは横幅を自動的には取得できなかった。（ object タグや embed タグには width 値が明記されているが、これをjquery.js に用意されている outerWidth やouterHeigh メソッドでは取得できないようだ。）

そこで、やむなく第５引数である options に横幅指定を入れて強制的に横幅を設定した。

動画においてこのような問題はあるものの、一部の問題を除いて設計通りの動きをしてくれることが確かめられたので、（..）（＾＾）（＾。＾）（＊＾o＾）（＾O＾）ｳﾚｼｰｰｰｰ！！！

その一部の問題については項を改めて以下に記したい。

▲ToTop

一部の、しかし既に解決した２つの問題点について

一部の問題点とは、第一に、背景色やボーダーの仕様（色・太さ・種類）を各ポップアップで変化するようにコードを書いているのに、そうならず、５つ全ての背景色が同じになってしまったり、ボーダーが表示されなかったりしたことである。

この点については、animatedPopup プラグインそのもののバグだったため、そのバグ退治に相当の時間を費やして改善を図った結果、やっと意図したとおりに表示されるようになった。

このバグは現在では退治済みなので、既にこの「一部の問題」は発生しなくなった。

第二の問題点は情報の先読み欠如である。画像や動画の先読み指定を行っていなかったため、初めてこのページを開いてボタンクリックしたときには、画像がうまく表示されなかったのだ。

久しく画像を扱っていなかったので（苦笑）、当然指定すべき先読み指定を忘れていたのだ。

勿論この点も解決済みである。

▲ToTop

次に他サイトそのものをポップアップしてみる

上では、或るサイト内に存在している画像や動画の１つをポップアップしたが、次にサイトそのものをポップアップしてみる。これにはインナーフレームを使うことが相応しい。

ここでは easing はjquery.js の既定値（swing）を使用し、背景色等はグレー系、easing 所要時間は 1.8 秒とした。

実はサイトの縮小表示を行いたいのだが、それを実現する方法がIE以外では分からないため、当面は不可能だ。

FC2ブックマークに追加

jQuery プラグイン としてアニメーションポップアップ ： animatedPopup を自作した。

このエントリイの改訂履歴など
  • 初稿：2009/04/19
  • 完結：2009/04/23
  • 第 1 回改訂：2009/04/25 right、bottom 指定をやめ全て left 又は top に統一した。
  • 第 2 回改訂：2009/04/26 画像も表示できるように引数処理を修正した。またポップアップ表示ボックスの色味を自在に操れるように引数を１つ追加した。これらによりこのプラグインの使いやすさが向上した。
  • 第 3 回改訂：背景やボーダーの色が思うように変化しないバグを修正

残念ながら IE ではここで説明するプラグインは動きません。

その理由は IE8 のエラーメッセージに拠れば「 jquery.js のアニメーション関連コードに問題有り 」と表示されるのですが、Firefox、Opera 及び Windows 版 safari で問題なくこのページのアニメーションが表示されるので、エラーメッセージ自体のエラーではないかと思われます。

つまりIE8の標準モードにおけるバグではないかと推測しています。

IE でも動くよう改訂するつもりですが、上のような理由ですので対応策が見つかりません。

ここで言う Animated Popup とは

ポップアップ表示をアニメーションメソッドを使って行うことを意味しています。例えば極小の点から一定の幅と高さを有する表示ボックスをズームポップアップし、それを消すときにはズームアウトするような、そんなポッップアップです。

Windows Vista でウィンドウ開閉時に行われるような、あのようなズームイン/アウトをポップアップ表示/隠蔽にも取り入れてみたいと思い立ち 4月11日頃に作成を開始しました。

何はさておき、その実例を示すことが先決でしょう。

下のボタンをクリックするとあるいはその近傍に、あるいは画面中央に、あるいは画面右下に、あるいは指定してある位置 {left:100px,top:200px} に、ポップアップがズームイン/アウトされます。表示する際のポップアップサイズは順に300、350、400、500px に、またアニメーションに要する時間はそれぞれ 1200、600、1600、2000 ミリ秒に設定してあります。

 クリックした位置の傍にポップアップ表示します。

クリックすると画面の中央にポップアップ表示します。

クリックすると画面の右下にポップアップ表示します。

クリックすると指定してある位置にポップアップ表示します。

クリックすると画面の中央に或るサイトの或る写真をポップアップ表示します。写真出典元は フォトライブラリ です。

▲ToTop

Animation と Easing

Easing は Animation 動作速度を変化させる「加速度メソッド」のことで、元々 Flash ツールである Acrion Script の Tween クラスの加速度メソッドとして誕生したようです。（半可通の知識しか持ち合わせていないので「ようです」としておきます。）

この Easing 関数が jQuery プラグインとして提供されているので、早速それを導入し、このページでは敢えて動きの激しい easeOutElastic を使用しました。本来、文字を表示するには変化の激しい elastic は相応しくないでしょうが、Easing を初めて使用した記念として「激しい」ものを選択してみたのです。

因みに、George Smith 氏により提供されているプラグイン「Easing Plugin」は、10種類あり、各々に３つの効果（easeIn、easeOut、easeInOut）を持たせて Easing 関数が定義されているため、都合 30 種類の easing 関数があります。→ Plugins | jQuery Plugins

その Easing の各々の動きの違いを示したサイトとして興味深いのは、flash ムービーですが easing_demo が実に分かりやすく有益です。これによりそれぞれの Easing がどんな挙動をするのか一目瞭然に理解できます。easing 関数内の代数式がグラフ化されていることも非常に有益です。

そこで、このデモサイトをまねて、このページ上で実現しているアニメーションポップアップに対して 32 種類の Easing 効果を適用するリストボックスを設置してみました。easing_demo に比べて文字表示の場合には各 easing の差異がわかりにくいのですが、まあそれはご愛敬ということで...。

下のリストボックスの説明
  • アニーメーションポップアップの表示位置は 「 画面中央 」 としました。
  • Easing に要する時間はそれぞれの関数の差異が分かり易いように長めに設定しました（２秒）。
  • jquery.js に組み込まれている linear と swing の 2 つの Easing 関数もリストアップしたので都合 32 種類の easing 関数が登録されています。
  • 別の easing 関数を選択する前に表示されているポップアップを隠蔽する必要はありません。自動的に前の表示を消して、新たな表示を行います。
補足：上の リストボックスに係るスクリプトの説明

このページのソースコードを表示すれば分かることですが、jquery.js を使って初めて form を扱ったので、記録を残すために敢えてここに記します。

■アイテムが選択された際の処理を行うスクリプトコード
$("#sel707").change(function(){
　var index = this.selectedIndex,
　　　selEasing = this.options[index].value,
　　　txt="これは easing 関数： "+selEasing+" を使って<br />表示/隠蔽するアニメーションポップアップです。";
　$(this).animatedPopup(txt,["c","c"],2000,selEasing,{width:"400px"});
});
html説明
selectタグに id="sel707" と size=10を、最初の option タグに非選択属性 disabled="disabled" を、二番目の option タグに初期値 selected="selected" を設定しました。
Javascript 説明
  • 要点は selectタグの jQuery インスタンスに change イベントを登録することです。
  • まずリストボックスから選択されたアイテムのインデックス番号を変数に代入し、その値を使って options 配列から選択されたアイテムの value 値を取りだし、最後にポップアップ文を構成します。
  • 以上の僅か 3 つの変数を定義するだけで準備は完了。後は適切な引数付きで animatedPopup メソッドを登録するだけです。

以上の簡単なコードによって、リストボックス内の項目が選択されたその瞬間に発生する change イベントにより、イベントハンドラーが起動されて必要な処理を行います。

▲ToTop

作成した Animaeted Popup の仕様

  • 作成した Animaeted Popup は jquery.js のプラグインとして組み込める形式としました。
  • Animaeted Popup の呼び出しは次の書式で行います。jQuery(expr) はjQueryインスタンスならば何でも構いません。
    jQuery(expr).animatedPopup(contents, layout, duration, easing, options, options2);
  • ＜引数の説明＞
 * contents： Strings in Animated Popup
 * layout: displaying position of Animated Popup
 * 	       text,ex. ["c","t"] (It means :left="center",top="top")
 *         or object,ex.{left:"100px",top:"200px"}
 *         or {left:"center",top:"100px"}
 * duration: durating time of animation(msec), ex.500 or "slow" etc.
 * easing: easing name (text), ex."easeInOutQuad","easeOutBounce",..32通りの指定が可能
 * 但し 32 種類を利用するには Easing Plugin を組み込む必要がある。
 * このサイトで利用している jquery.js には Easing Plugin を組み込み済みです。
 * options: Add CSS Object to Popup DIV, ex.{width:"400px",･･･}
 * options2: Add CSS Object to Popup DIV's CLOSE Bar, ex.{background:"midnightblue",･･･}
 * 全ての引数にはデフォルト値が設置済みなので複数の任意の引数が省略されても誤動作しません。
 * 何も引数がない場合、その旨を表示する animatedPopup を画面中央に表示します。

▲ToTop

作成した Animaeted Popup の Javascript コード

コードは長めになりました。説明を含めて 190 行あります。

ここでその全てを掲載しブロックごとに解説を加えることとします。

animatedPopup プラグインの全コード
  1:(function($){
  2:$.fn.extend({
  3:animatedPopup: function(contents,layout,duration,easing,options,options2){
  4:/*
  5: * <Example of Implementation>
  6: * jQuery("p").animatedPopup("And I love you so. Yesterday. Yellow Submarine.",
  7: * 　　["c","b"],800,"swing",{width:"300px"})
  8: *
  9: * <arguments explanation >
 10: * contents： Strings in Animated Popup
 11: * layout: displaying position of Animated Popup
 12: *      text,ex. ["c","t"] (It means :left="center",top="top")
 13: *      or object,ex.{left:"100px",top:"200px"}
 14: *      or {"left":"center","top":"100px"}
 15: * duration: durating time of animation(msec), ex.500 or "slow" etc.
 16: * easing: easing name (text), ex."easeInOutQuad","easeOutBounce",...
 17: * options: Add CSS Object to Popup DIV, ex.{"width":"400px",･･･}
 18: * options2: Add CSS Object to Popup DIV's Title DIV, ex.{background:"midnightblue",･･･}
 19: *
 20: * <history>
 21: * released 2009/4/22 ver0.1
 22: * update 2009/4/25 ver0.2, 2009/4/26 ver0.3
 23: */
 24:　var jQInst=$(this), winWH = {width:$(window).width(),height:$(window).height()},
 25:　　errFlag,lcr,tcb,xName,yName,m=[],addValue={x:0,y:0},isImg,
 26:　　mousePos={left:0,top:0},xCenter=$(window).width()/2,yCenter=$(window).height()/2;
 27:　 // CSS 既定値は width 値が contents により変わるので、関数化しインスタンス毎に設定する。
 28:　var　defaultCSS =function(){
 29:　　isImg = contents.match(/.*((<img.+src.+)|(<object.+)|(<embed.+)).*/i);
 30:　　return {
 31:　　　"color":"white","font-weight":"bold","margin":0, "padding":"19px 5px 5px 5px",
 32:　　　/* 画像の場合ここで width を決めては駄目*/
 33:　　　"width": (isImg && isImg[1]) ? null : "300px",
 34:　　　"background-color":"royalblue", "border":"5px plum ridge", "text-align":"center",
 35:　　　"display":"block","visibility":"visible"
 36:　　}
 37:　}
 38:　/* ポップアップに使用するCSS値を設定する*/
 39:　var popupCSS = $.extend(true,defaultCSS(),options || {});
 40:　/* closeBar CSS値も容易に変更できるように設定する */
 41:　var　closeBarCSS = function(){return $.extend(true,{
 42:　　"position":"absolute","zIndex":"1001","text-align":"center",
 43:　　"opacity":0.75,"top":0,"left":0,"width":"100%","cursor":"pointer",
 44:　　"font-size":"small","lineHeight":"1.2em","background-color":"midnightblue"
 45:　},options2 || {})};
 46:
 47:　// bind onmousemove event on document
 48:　mousePos.oX = 4; mousePos.oY = 16; //マウスカーソルからの離隔距離
 49:　$(window).mousemove(function(e){
 50:　　mousePos.left = (jQuery.browser.msie ? window.event.clientX - document.body.clientLeft : e.clientX) + mousePos.oX;
 51:　　mousePos.top = (jQuery.browser.msie ? window.event.clientY - document.body.clientTop : e.clientY) + mousePos.oY;
 52:　});
 53:
 54:　// error 処理関数(後に拡張できるように関数にしておく)
 55:　var errFunc = function(){ errFlag=true; return function(){return}}
 56:
 57:　// animatedPopup の配置位置算出関数
 58:　var getPos = function(layout){
 59:　　if (layout && layout.constructor!= Object && layout.constructor!= Array ){
 60:　　　alert("配置は２つのテキスト：例 \"Center\",\"Top\" 、または\nオブジェクト形式：例 {left:\"10px\",top:\"100px\"} で指定してください。");
 61:　　　errFunc()();
 62:　　}
 63:　　var setPos = layout;
 64:　　if (setPos.constructor==Array) {
 65:　　　var chk1 = /^((l.*)|(c.*)|(r.*))/.exec(setPos[0].toLowerCase());
 66:　　　var chk2 = /^((t.*)|(c.*)|(b.*))/.exec(setPos[1].toLowerCase());
 67:　　　if (chk1 && chk2){
 68:　　　　lcr = chk1[2] && "left" || chk1[3] && "center" || chk1[4] && "right";
 69:　　　　tcb = chk2[2] && "top" || chk2[3] && "center" || chk2[4] && "bottom";
 70:　　　　xName = (lcr!=="right") ? "left" : "right";
 71:　　　　yName = (tcb!=="bottom") ? "top" : "bottom";
 72:　　　} else {
 73:　　　　if (!chk1 && !chk2) {
 74:　　　　　alert("左右上下 \""+ setPos[0] +" , "+ setPos[1] +"\" 共に指定が間違っています。\nやり直してください。");
 75:　　　　} else if (!chk1 && chk2){
 76:　　　　　alert("左右の指定 \""+ setPos[0] +"\" が間違っています。\nやり直してください。");
 77:　　　　} else if (chk1 && !chk2 ){
 78:　　　　　alert("上下の指定 \""+ setPos[1] +"\" が間違っています。\nやり直してください。");
 79:　　　　}
 80:　　 　　errFunc()();
 81:　　　}
 82:　　} else if (typeof setPos!=="string" && setPos.constructor==Object) {
 83:　　　for (name in setPos){
 84:　　　　name=name.toLowerCase();
 85:　　　　if (name=="left" || name=="right") {xName = name;lcr=name}
 86:　　　　if (name=="top" || name=="bottom") {yName = name;tcb=name}
 87:　　　}
 88:　　　if (xName==null || yName==null){
 89:　　　　alert("left、right、top、bottom 以外の\n指定は無効です。やり直してください。");
 90:　　　　errFunc()();
 91:　　　}
 92:　　　// 位置指定値が "left" のように文字で為されたときの対応
 93:　　　if (!setPos[xName].match(/\d+/))
 94:　　　　m[0] = setPos[xName].toLowerCase().match(/^(left|center|right)$/);
 95:　　　if (!setPos[yName].match(/\d+/))
 96:　　　　m[1] = setPos[yName].toLowerCase().match(/^(top|center|bottom)$/);
 97:　　　if (!setPos[xName].match(/\d+/) && m[0]===null || !setPos[yName].match(/\d+/) && m[1]==null){
 98:　　　　alert("配置指定値が間違っています。\nやり直してください。");
 99:　　　　errFunc()();
100:　　　}
101:　　　addValue={
102:　　　　x :( m[0] ? ((m[0]==="center") ? xCenter :0) : parseInt(setPos[xName])),
103:　　　　y :( m[1] ? ((m[1]==="center") ? yCenter :0) : parseInt(setPos[yName]))
104:　　　};
105:　　} else if(layout){
106:　　　alert("配置指定が無効です。やり直してください。");　errFunc()();
107:　　}
108:　　var obj={};
109:　　obj[xName]= ((lcr==="center") ? xCenter : 0) + addValue.x;
110:　　obj[yName]= ((tcb==="center") ? yCenter : 0) + addValue.y;
111:　　return obj;
112:　};
113:
114:$(function(){
115:　// popup 表示用の div 要素タグの作成
116:　if (!$("#dispElem").size()) {
117:　　$("<div id='dispElem'></div>").css({
118:　　　position:"absolute",display:"none",zIndex:"1000"
119:　　}).appendTo(document.body);
120:　}
121:　var disp=$("#dispElem");
122:
123:　// Popup 隠蔽用×タグの作成
124:　if (!$("#xMark").size()){
125:　　$("<div id='xMark'>CLOSE</div>").append("<div style='width:13px;float:right;margin-top:-1em;'>×</div>").appendTo(disp);
126:　}
127:　var xMark = $("#xMark").css(closeBarCSS());
128:
129:　// STEP1:*************** 表示前に popup エレメントの高さを測定する
130:　var getElemWH= function(){ // 表示 popup サイズ算定
131:　　// popup 表示前に横幅と文字数に応じた高さを計測する(非表示描画で測定)
132:　　contents = contents || "ポップアップする内容が指定されていません。<br />やり直してください。";
133:　　disp.html(contents).css($.extend(true,popupCSS,{"visibility":"hidden","height":null}));
134:　　if(isImg && isImg[1]) disp.css("width",null);
135:　　return {
136:　　　iW: popupCSS.width=(options && parseInt(options.width) || defaultCSS().width && parseInt(defaultCSS().width) || disp.width()),
137:　　　iH: popupCSS.height=disp.height(),
138:　　　oW: disp.outerWidth(),oH: disp.outerHeight()
139:　　}
140:　}
141:
142: 　// 幅/高さが極小の要素 css 値を設定する。これにより拡張/縮小を演出する。
143: 　// またここで初めてスクロールされていた場合の変動値を配置px値に追加する。
144:　var shrinkCSS=function(){
145:　　var scrLeft=$(window).scrollLeft(),scrTop=$(window).scrollTop(),
146:　　　obj={"width":"1px", "height":"1px", "border":"0px", "padding":"0px","margin":"0px"};
147:　　if (!layout){
148:　　　obj.left=mousePos.left+scrLeft+"px";
149:　　　obj.top=mousePos.top+scrTop+"px";
150:　　} else {
151:　　　var pos = getPos(layout);
152:　　　if (errFlag) return;
153:　　　obj.left=((xName=="left")-(xName=="right"))*pos[xName]+
154:　　　　(xName=="right")*winWH.width + scrLeft+"px";
155:　　　obj.top=((yName=="top")-(yName=="bottom"))*pos[yName]+
156:　　　　(yName=="bottom")*winWH.height + scrTop+"px";
157:　　}
158:　　return obj;
159:　}
160:
161:　var hideElem = function(e){ // popup 要素をアニメーション隠蔽する
162:　　disp.empty().animate(shrinkCSS(),{queue:false,duration:duration,easing:easing});
163:　}
164:　var animaElem = function(e){
165:　　$(":animated").queue('fx',[]).stop(); // 登録済みのアニメを全て削除停止する
166:　　var doneShrink = shrinkCSS(); // この関数内で1回だけ起動する
167:　　if (errFlag) return;
168:　　// STEP2:***************
169:　　var elemWH = getElemWH(); //エレメントサイズ計測実行
170:　　if (!layout){ // 画面からはみ出さないように CSS 値を調整
171:　　　if (winWH.width < mousePos.left+elemWH.oW)
172:　　　　popupCSS.left = winWH.width + $(window).scrollLeft() - elemWH.oW +"px";
173:　　　if (winWH.height < mousePos.top+elemWH.oH)
174:　　　　popupCSS.top =  winWH.height + $(window).scrollTop() - elemWH.oH +"px";
175:　　} else { // popup をセンター配置する場合の CSS 設定
176:　　　popupCSS.left = parseInt(doneShrink.left) -
177:　　　　((lcr==="center" || m[0] && m[0]==="center") ? Math.round(elemWH.oW/2) : (xName==="right") ? Math.round(elemWH.oW) :0) +"px";
178:　　　popupCSS.top = parseInt(doneShrink.top) -
179:　　　　((tcb==="center" || m[1] && m[1]==="center") ? Math.round(elemWH.oH/2) : (tcb==="bottom") ? Math.round(elemWH.oH) :0) +"px";
180:　　}
181:
182:　　// STEP3:*************** 極小要素を指定されたアニメーション起動位置に配置
183:　　// dispElem の幅と高さを1pxにして所定位置に配置する（但し非表示描画）
184:　　disp.empty().css(doneShrink);
185:　　// STEP4:*************** 表示アニメーション
186:　　disp.html(contents).append(xMark.css(closeBarCSS()))
187:　　　.css({visibility: "visible",display:"block"})
188:　　　.animate(popupCSS,{queue:false,duration:duration||"slow",easing:easing||"swing"});
189:　　// STEP5:*************** × クリック時に隠蔽アニメーションを起動する。
190:　　// ここで隠蔽関数を起動するようにしておかないと、複数回ボタンがクリックされた
191:　　// 場合に隠蔽操作ができなくなる。理由は未解明。
192:　　xMark.click(hideElem);
193:　}
194:　jQInst.click( errFlag ? function(){errFlag=false; $(this).unbind("click");} : animaElem );
195:}); // End of "DOMReady function"
196:} // End of "animatedAlert function"
197:}); // End of "Extend function"
198:})(jQuery);

▲ToTop

animatedPopup プラグインの解説

その意味や役割から幾つかのブロックに分けて解説します。

第�汽屮蹈奪�(#1-22)

まず最初のブロックは、このメソッドの引数を定義しそれらを解説している部分です。

無名関数による起動と DOMReady 関数の利用（#1、#100）

このプラグインでは、一般的方法に倣って全体を無名関数で括り、即実行するようにしました。またポップアップ表示やポップアップ消去のための絶対配置 div 要素を追加し、かつそれらに様々なメソッドを適用する必要があることから、必要最小限の範囲を DOMReady function で括りました。

$.fn.extend クラスメソッドの利用（#2）

これにより、jQuery インスタンスのメソッドとして animatedPopup 関数を登録します。

animatedPopup 関数の引数（#3-18）

引数は６つあります。第一引数はポップアップボックス内に表示する文字列で、第２引数 layout は様々な方法でポップアップ位置を指定できるよう工夫し、第２引数を指定しない場合には、起動元 jQuery インスタンスが指し示す要素の近傍にポップアップするように設計しました。

第５及び第６引数も工夫しました。extend メソッドの２つめの使い方、つまり「 オブジェクト拡張 」を利用して、popup 要素のデフォルトCSS を設定しておくと共に、options で自在にそれを変更できるようにしました。幅や色、ボーダーの色と幅等々気分自由に変更することが出来るようにすることが目的であり、それを達成しました。

なお、この方法は jquery.js の Ajax ブロックで採用されていますのでそれを参考に考案しました。

▲ToTop

第�競屮蹈奪�(#24-45)

このブロックは、ローカル変数を定義している部分です。

■変数定義部分（再掲）
 24:　var jQInst=$(this), winWH = {width:$(window).width(),height:$(window).height()},
 25:　　errFlag,lcr,tcb,xName,yName,m=[],addValue={x:0,y:0},isImg,
 26:　　mousePos={left:0,top:0},xCenter=$(window).width()/2,yCenter=$(window).height()/2;
 27:　 // CSS 既定値は width 値が contents により変わるので、関数化した。
 28:　var　defaultCSS =function(){
 29:　　isImg = contents.match(/.*((<img.+src.+)|(<object.+)|(<embed.+)|(<iframe.+)).*/i);
 30:　　return {
 31:　　　"color":"white","font-weight":"bold","margin":0, "padding":"19px 5px 5px 5px",
 32:　　　/* 画像の場合ここで width を決めては駄目*/
 33:　　　"width": (isImg && isImg[1]) ? null : "300px",
 34:　　　"background-color":"royalblue", "border":"5px plum ridge", "text-align":"center",
 35:　　　"display":"block","visibility":"visible"
 36:　　}
 37:　}
 38:　/* ポップアップに使用するCSS値を設定する*/
 39:　var popupCSS = $.extend(true,defaultCSS(),options || {});
 40:　/* closeBar CSS値も容易に変更できるように設定する */
 41:　var closeBarCSS = function(){return $.extend(true,{
 42:　　"position":"absolute","zIndex":"1001","text-align":"center",
 43:　　"opacity":0.75,"top":0,"left":0,"width":"100%","cursor":"pointer",
 44:　　"font-size":"small","lineHeight":"1.2em","background-color":"midnightblue"
 45:　},options2 || {})};
jQuery インスタンスの取得（#24）

まず最初にこのプラグインの呼び出し元となる jQuery インスタンスを取得します。

DOMReady 関数内で jQuery インスタンスを呼び出そうとしたのですが、関数内では this は window オブジェクトを参照してしまうため、前もってここで取得しておくことにしました。

表示中の window の幅と高さの取得（#24）

これは jquery.js で定義されているクロスブラウザな便利なメソッドをそのまま活用しました。

これらの値を取得する意味は、画面の中央や左や右にピタリと寄せて配置する場合に利用するためです。

ポップアップ窓のデフォルト CSS 設定（#28-37）

ボーダーやパディング、そして色と背景色──これらの初期値を定めておかないとその都度思案し確定し指定しなければなりません。これはいかにも面倒なので既定値を設定しました。options で特に指定しなければ既定値が適用された popup 窓が表示されるわけです。

実は画像や動画にも対応させるために、最終段階でこのブロックを大きく改変しました。

#29 では正規表現を利用して img タグ、object タグ、embed タグ、あるいは iframe タグ文字列が第一引数 contents に含まれるかどうかをチェックします。そしてそれらのいずれかが含まれる場合には、デフォルト値としての画像サイズを設定しないこととしました。（#33）

これは引用先のCSS設定を反映する場合があったので、敢えて width 値を定めずにおいて、引用先サイトの padding 設定値なども反映した outerWidth 値を取得するためです。

実際に表示するポップアップ窓の CSS 値の指定（#38-39）

これには extend メソッドの２つめの機能である"ボブジェクト拡張"を利用しました。

optionsで任意の CSS 値を与えれば、デフォルトCSSを上書きしてユーザーの要望通りの表現を実現することが出来ます。また ||{} により options が指定されなかった場合にデフォルト値を利用するように工夫しました。

ポップアップ窓上辺の CLOSE バー CSS 値の指定（#40-45）

これも extend メソッドの"ボブジェクト拡張"を利用しました。

options2で任意の CSS 値を与えれば、デフォルト値を上書きしてユーザーの要望通りの表現を実現することが出来ます。また ||{} により options2 が指定されなかった場合にデフォルト値を利用するように工夫しました。

その他の変数（#25-27）

重要な役割を果たすローカル変数をここで定義しました。

addValue は配置位置がピクセル指定された場合のそのピクセル値を格納します。

mousePos はイベント発生要素の近傍にポップアップを配置する場合に必要となるマウスカーソルの現在値を所得するための変数です。

xCenter、yCenter は画面中央に配置するために必要な値で、それぞれ横方向の画面中央位置、縦方向の画面中央位置を取得します。

▲ToTop

第�轡屮蹈奪�：マウス move イベントの登録とエラー対応(#4752)

第２引数 layout を指定しない場合に、マウスカーソル近傍にポップアップさせるためには、マウスの動きを常に Javascriptが 「監視」 しその位置を取得していなければなりません。そのためのイベント登録を行う部分です。これにより document の任意の箇所においてマウスカーソルの動きを常駐監視し、その位置を取得することになります。

 47:　// bind onmousemove event on document
 48:　mousePos.oX = 4; mousePos.oY = 16; //マウスカーソルからの離隔距離
 49:　$(window).mousemove(function(e){
 50:　　mousePos.left = (jQuery.browser.msie ? window.event.clientX - document.body.clientLeft : e.clientX) + mousePos.oX;
 51:　　mousePos.top = (jQuery.browser.msie ? window.event.clientY - document.body.clientTop : e.clientY) + mousePos.oY;
 52:　});
 53:
 54:　// error 処理関数
 55:　var errFunc = function(){ errFlag=true; return function(){return}}

ここでも IE が、IE だけが特殊な方法を採用しており、そのために面妖な設定をしなければならないのはユーザーにとって不幸なことです。早く IE のユーザー比率が低下することを願ってやみません。IE8 の登場によりその願いはまた叶うことなく先送りされてしまいましたが、中長期的には IE 固有の仕様は消え去る運命にあることは間違いないでしょう。

実際、後のエントリイで触れましたが、IE8 では少なくともスタイル設定に関しては Web 標準準拠に切り替わりました。これは 1 社だけで頑迷に固執し続けてきた奢りが、10年来のブラウザ戦争の中でやっと崩れ去ったことを意味しており、記念すべき歴史的事件と言って差し支えないでしょう。

#54 のエラー対応は「関数を返値とする」特殊な関数を利用します。これにより返値は return 値を有する関数となるので、errFunc()() のようにして、返値である関数を呼び出し先で実行することによりトップレベルにおいて return 値を返すことが可能となります。

ここに最初の括弧は errFunc 関数を実行するため、2つめの括弧は errFunc 関数の返値としての関数を実行するためです。#61 など随所で活用しています。

▲ToTop

第�献屮蹈奪�：ポップアップ配置位置の設定メソッド(#57-112)

このブロックはたった１つのメソッド登録ですが長大になりました。しかし、様々な指定方法に対応するために必要不可欠な部分であり、長くなってしまったのはエラー処理をふんだんに盛り込んだためでもあります。

#59-62 は最初のエラー処理です。

不適切な layout 指定があった場合の警告表示とコード進行停止を指定しています。

#64-82 は layout が配列だった場合の処理です。

#65-72 で、left、le あるいは l だけでも受容するように指定文字を簡略化できるように工夫し、所定の文字が与えられた場合には、それらを left、center、right、top、bottom の文字列に変換しています。

lcr には left、center、または right の文字が入力され、tcb には top、center、または bottom が代入されます。

また、xName には left か right が、yName には top か bottom が代入されます。

#73-81 は配列指定が適切ではなかった場合のエラー処理です。

#82-107 は layout がオブジェクト指定された場合の処理です。

#83-87では layout オブジェクトを走査して、配置指定に係る定義値を取得し、変数に代入します。捜査の結果必要な文字がなければ #88-91 でエラー処理します。

#92-100 は 配置指定が px 値ではなく "center" などの文字列で行われた場合の処理です。

#93-97 で配列 m に横方向と縦方向の配置指定文字列を代入し、layout が適切な指定でなければ、#97-100 でエラー処理します。

#101-107 では縦横方向の配置指定値を取得します。

二項演算子を活用して、センター配置か否か、及び px 指定値がある場合の２つのケースから値を取得します。

エラー発生時には空オブジェクトを返すようにしました。

#108-110 ではここ迄の処理で確定した配置用変数を活用して CSS 値を設定します。

センター配置の場合のみ画面中央位置を取得し、その他は指定されていればピクセル値を代入します。

▲ToTop

第�好屮蹈奪�：ポップアップ用 div 要素の作成(#111-134)

ブラウザにとってポップアップ用要素が用意できなければ何も始められないため、これ以降は DOMReady 関数で括ります。

popup 表示用の div 要素タグの作成（#115-120）

２回目以降の animatedPopup 起動時に dispElem が重複設置されないように 116 行でこのノードの存在確認を行います。もし存在すれば、改めて変数 disp に当該ノードを参照する jQuery インスタンスを登録します。

存在しない場合には、タグ要素を CSS 設定値を含めて作成し、その後に jQuery インスタンスを作成し変数に代入します。

この CSS 設定では絶対配置、非表示、レイヤー順を指定し、ポップアップを自在に配置できるように、また body 部に追加した時点ではそれが表示されないよう準備します。

popup 隠蔽用×印タグの作成（#123-127）

ポップアップ用 div 要素の右上にこのポップアップを隠蔽するためのバツ印を用意しました。ここでも二重登録しないようにこの要素の存在確認を行います。

更に×印だけではマウスカーソルをその位置にフィットする手間が面倒なので、隠蔽クリックを受け入れる箇所を点から線に拡張して、タイトルバー形式にしました。

▲ToTop

第�坤屮蹈奪�：アニメーション用の諸関数定義(#129-193)

ここ迄でアニメーションポップアップのための準備が終わりました。愈々、動きのあるポップアップ表示や隠蔽操作のための関数を定義します。

ポップアップする要素の高さのサイズを測定する getElemWH 関数

まず第一引数 contents が未指定の場合の対応を 132 行で行いました。未指定の場合には所定の文章（ || の右側の文章 ）を用意しておき、これを animetedPopup 関数を使ってポップアップします。

文字列をポップアップする場合特に、その要素サイズを「表示前に」如何にブラウザに知らせるかが課題となります。文字列の文字数が固定されていても、文字の横幅は一定ではないので内容によってはサイズは変わりますし、一般にポップアップ表示を行う文字列は長さは不定・可変です。そのためブラウザは、幅が指定されていなければ表示領域一杯の幅が指定されたものと見なし、或いは要素の幅が指定されている場合にはその幅で要素を表示しますが、ブラウザはこれらのいずれの場合においても、要素表示前にはその要素の高さを認識しません。

別のエントリイで不定型ボックスサイズを表示する前にブラウザに認識させる方法について詳細に触れましたが、このプラグインで採用した方法は、自前で考案した透明化してサイズを測定する方法ではなく、jquery.js で利用されている visibility 属性を利用する方法を採用しました。

jquery.js で採用している表示前サイズ計測方法は、1. position : absolute、2. display : block、3. visibility : hidden とすることにより、「絶対配置のブロック表示状態にしてそれを表示させない」状態を作るものです。（jquery.js： css 関数内の #773 で呼び出される #735-748 の swap 関数）

なお、このプラグインで実際に必要となるのは outerHeight と innerHeight なのですが、この際無意味ですが４つのサイズを測定しておくようにしました（苦笑）。

またinnerHeight については、代入式を iH のプロパティ値とすることにより、同時に 2 つのプロパティに値を取得させました。

ポップアップボックスの拡張/縮小を演出する shrinkCSS 関数

アニメーションを演出するために幅と高さが極小のスタイル値を設定します。これによりアニメーションの始点と終点の位置と要素の表示状態を取得します。

またアニメーションの始点/終点を取得するためには、縦横のスクロール状態を Javascript インタープリタに認識させなければなりませんから、この関数内でスクロール値を取得します（#145）。

後述するように、クリック時のイベントハンドラー内から、shrinkCSS 関数を呼び出して、そのときのスクロール値を取得します。

次にこの関数内から #151 で getPos 関数を呼び出していますが、これにより画面内の左右上下中心のどの位置に配置するか、あるいはマウスカーソルの近傍に配置するかを確定します。

エラーフラグが立っている場合にはコード進行を止めます。（#147）

#153-156で right や bottom 指定された場合に left や top に変換しています。

right / bottom 指定された値をleft / top に変換する計算式は、最後の最後まで苦労を重ねました。getPos 関数からの戻り値は、right / bottom 指定のママですが、#153-156 においてこれらを left / top に変換します。この結果 shrinkCSS 関数からの戻り値は left / top のみとなります。

popup 要素をアニメーション隠蔽する hideElem 関数

これはいわば逆アニメーションで、animaElem 関数で表示したポップアップを縮小しながら隠蔽します。最初にコンテンツを削除してから shrinkCSS 関数をよびだし、かつこのアニメーションを待ち行列に登録しないよう queue 値を false にします。

なお、shrinkCSS 関数でエラーが発生する可能性がありますが、hideElem 関数は、必ずanimaElem 関数が走行した後にしか起動されず、animaElem 関数内において shrinkCSS 関数にエラーが発生した場合の処理は記述されています。エラー発生時には hideElem 関数呼び出しまで到達しませんので、当該関数ではエラー処理を必要としません。

アニメーションポップアップ表示を行う animaElem 関数

ここでは次のような様々な処理を行っています。1.登録アニメーションの削除と停止（#165）、2. この関数内で一回だけ shrinkCSS 関数を呼び出し、結果を変数に記録（#166）、この返値が空の場合の処理（#167）3.画面からポップアップをはみ出させない処理（#170-174）、4.画面センターに配置する場合、あるいは right / bottom が指定された場合の、ポップアップサイズと表示位置の調整（#176-180）、4.アニメーションの始点設定（#184）、5.アニメーション表示（#186-188）（ここでも隠蔽処理同様に待ち行列には登録しません。）、そして 6.ポップアップ窓の隠蔽ハンドラー呼び出しです（#190-192）。

ここでの要点は以下の点です。

  • ポップアップ要素を画面外にはみ出させない処理のために必要となる要因は、画面サイズ、スクロール値及びポップアップ要素のサイズです。
  • アニメーション待ち行列の扱いは、全てのアニメーションを非登録としました。当然ですが登録してしまうと、二度目以降の animatedPopup() 起動時において、最初以降から直前までの以前に利用したアニメーションが順次起動してしまうためです。
  • 179行で、duration や easing が指定されなかった場合のデフォルト値を設定しました。
  • ポップアップの隠蔽はクリックイベントを登録して行いますが、表示関数の中から行うようにしました。連続してクリックしてポップアップさせた場合に、クリックしてもそれを消せない場合が発生したためです（原因は不明）。

▲ToTop

第�札屮蹈奪�：クリックイベントの登録(#190)

最後の処理です。要素タグへのクリックイベント登録では、エラー発生時に登録済みクリックイベントを削除するようにしました。ここで最初にして最後ですが errflag 値を利用します。

イベントハンドラー内で使用した $(this) は click が jQInst のメソッドですから、jQInst を参照します。

FC2ブックマークに追加

以前の頁(1)
 | 
ホーム(2)

　90％近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

　多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

　StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

　クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

　起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

　ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

　無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

　画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか？　様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

　複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
（以下当該サイトから抜粋）初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

　Animation Gifファイルを作れる無料ソフト。

　キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

　画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。（Vectorの当該ソフト紹介頁より抜粋引用）

　名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

　ランチャーソフトは沢山あるが、中でもこれが一押しだ。２年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

　AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

　IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood！　sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

　利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

　WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い！ 数多あるMedia Playerの王様と言えるだろう。

　自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

　DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト＝「DVDなToolたち」なるHomepageが開きます。

200910082246
200909150101
200909070032
200909012323
200908242332
200908201146
200908182132
200908161701
200908091346
200908030727
200907220708
200907212250
200907201110
200907200154
200907200101
200906160754
200905050318
200905010758
200904261807
200904060045