jQuery の .animate() で普通のオブジェクトをアニメーションさせる

説明するより見たほうが早かったりして。

$({ x:0, y:100 })
    .animate({ x:100, y:50 }, {
        duration:5000,
        progress:function (anim, progress, fx) {
            console.log('x:' + anim.elem.x, 'y:' + anim.elem.y));
        }
    })

このように、プリミティブなオブジェクトでも animate メソッドでグリグリと値を変化させられる。通常の animate と同じように、 duration や easing といったオプションも指定できる。

案外知られていないのではなかろうか。スムーススクロールなどに使えそうですね。

jQuery 1.7.x 以前の場合

jQuery 1.7.x 以前は、 animate メソッドのオプションとして progress を指定できない。その場合は step を使用する。

$({ x:0, y:100 })
    .animate({ x:100, y:50 }, {
        duration:5000,
        step:function (now, fx) {
            console.log(fx.prop, now);
        }
    })

注意点として、 step に指定した関数は、アニメーションさせたいオブジェクトが持つプロパティの数ぶんだけ実行されるという点がある。たとえば上述のコードで、秒間20コマのアニメーションがあるとすると（jQuery.fx.interval == 50）、5秒間で100コマのアニメーションとなる。 step に指定した関数が呼ばれる回数はこれにプロパティの数を掛けた分になる。つまり200回。パフォーマンス的にはよろしくないかもしれない（未測定）。