jQuery animateのstep関数を便利に使う | _level0 - KAYAC Front Engineer Blog

こんにちは。HTMLファイ部の岩淵です。 はじめに 皆さん、jQueryのanimateメソッドを使おうとしたときに、「ちょっとこれはanimateできないなぁ...」と困ったことはありませんか？ 例えば、Google Maps APIの setPosition(new google.maps.LatLng(lat, lng)) みたいな、変数をセットする関数を実行しなければいけないとき。 例えば、CSS3の transform: translate(50px, 20px); のように、transformの値を変化させるとき。 そんなときはjQueryのanimateを使わずにsetIntervalを使ったりして代用するところですが、 終了判定をしてclearIntervalを叩くのは面倒ですし、 animateを使うことによりcompleteで終了時の関数を実行したりイージングを付けられ

[totttte]

“ところで、jQueryオブジェクトの対象はDOM要素だけだと思っていませんか？ 実は任意のオブジェクトはjQueryオブジェクトにすることができます。”

[JHashimoto]

“このように、今までは黒魔術的にanimateさせる感じにしていましたが、 この度汎用的なstepアニメーションをjQueryプラグイン化しました。”