Example
実際の動きはSafari、Google Chromeでご覧ください。addCommand - scrollbar
サンプル動画のソースコード： gist: 190118 - GitHub
Documentation
addCommandはjQueryを使ったアニメーションをさらに使いやすくしたjQuery Pluginです。1つのアニメーションが終わっから別のアニメーションを実行しようとするとjquery.animateメソッドではcallbackに次のアニメーションを指定する必要があります。
これだとプログラムコードがネストしてしまい、コーディング時にちょっとした工夫をしないと読みにくくなってしまいます。
これをサポートするのがaddCommand.jsです。
addCommandは4種類の引数をもちます。
- 1つずつ順番にアニメーション処理をするDoTweener
- CSS効果を付けるProp
- 途中で処理を行うためのfunction() {}
- 一気に処理を実行させる配列
（※ProgressionのaddCommandを完全移植しようと思ったのですが、あんまりいらないかと思い現時点では2個だけにしています。いずれ実装するかも？）
また、画期的なchainライブラリcho45's jsdeferred at master - GitHubにも影響を受けています。
サンプルコード
JavaScript
Propでcssを指定してからDoTweenerで1つずつanimation
一気に2つのanimationを実行して終わったらalert表示
Options
DoTweener
基本的にはjquery.animateメソッドと同じですが、追加機能としてdelayを用意しています。| Parameter名 | Description |
| selector | jqueryの$()で実行した結果を渡します。 |
| prop | アニメーションするときに指定するCSSを渡します。 |
| duration | アニメーションの速度を渡します。単位はms。 |
| easing | イージングを渡します。jqueryのデフォルトは"swing"と"linear"ですがjQuery Easing Pluginを使うことで増やせます。 |
| callback | アニメーションが終わった際に実行したい処理をfunctionで渡します。。 |
| delay | アニメーションを遅延させます。単位はms。 |
Prop
jquery.cssメソッドのラッパーになります。| Parameter名 | Description |
| selector | jqueryの$()で実行した結果を渡します。 |
| prop | jquery.cssと同様CSSを渡します。 |
$.addCommand.define();
$.addCommand.define()を実行することにより、$.addCommand.DoTweenerをwindow空間に定義するので、DoTweenerとそのまま使えるようになります。
グローバルスコープを汚染されたくない場合は、使用しないでくださいな。