Adventarの12日目です。HTMLファイ部の岩淵です。lng))みたいな、変数をセットする関数を実行しなければいけないとき。20px);のように、transformの値を変化させるとき。animateを使うことによりcompleteで終了時の関数を実行したりイージングを付けられたりするので、animateがもたらす恩恵は大きいです。そこでstep!!そんな時、step関数が役に立ちます。stepがどういうものかは、ちょうど去年のアドベントカレンダーで取り上げられていた記事を参考にしてください。実は任意のオブジェクトはjQueryオブジェクトにすることができます。10000});のようにすれば、オブジェクトの各プロパティーを滑らかに変化させることができます。実行中にobjの値をトレースしてみると、値が変動していることがわかると思います。ちなみに、この例のように変化させるプロパティーが複数の場合、step関数がプロパティ毎に複数回実行されてしまうので、その場合はprogress関数を使った方がいいでしょう。これを応用して、stepを使ったアニメーションを次のように書きます。'translate('+x+'px,'+y+'px)');}空のオブジェクトだとアニメーションしてくれないので、_tという0から1まで変化するプロパティーを持たせています。この度汎用的なstepアニメーションをjQueryプラグイン化しました。}});このように指定すればDOM要素をstepのアニメーションにすることができます。アニメーションはキューに溜まらず、メソッドチェーンを使った逐次的アニメーションはできないのでそこら辺は改善の余地ありです。皆さん、ぜひ使ってみてください!stepまとめ:フレーム毎に任意のコードを実行できる任意の関数を叩けるので、CSSプロパティー以外にも使えるCSS3のtransformプロパティーにも対応できる明日は@Yuhiiskさんです。SocialAnimationinfomisc.当サイトは、ブラウザのJavaScript設定を有効にしてご覧ください。