Example

このDemoは映像になります。
実際の動きはSafari、Google Chromeでご覧ください。addCommand - scrollbar
サンプル動画のソースコード: gist: 190118 - GitHub

Documentation

addCommandはjQueryを使ったアニメーションをさらに使いやすくしたjQuery Pluginです。
1つのアニメーションが終わっから別のアニメーションを実行しようとするとjquery.animateメソッドではcallbackに次のアニメーションを指定する必要があります。
これだとプログラムコードがネストしてしまい、コーディング時にちょっとした工夫をしないと読みにくくなってしまいます。

これをサポートするのがaddCommand.jsです。

addCommandは4種類の引数をもちます。
FlashのライブラリProgressionからヒントを得て制作しました。
(※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とそのまま使えるようになります。
グローバルスコープを汚染されたくない場合は、使用しないでくださいな。

Demo

Download