jQueryのanimateメソッドではJavaScriptオブジェクトも操作できるという話

jQueryのanimateメソッド、名前のとおりアニメーションを表現する際に利用することもあり、とても重宝しています。例えば、以下のようなコード。

$('#animate_div').animate({width:'500px'}, 1000)

上記のコードは、animate_divというIDのついた要素のwidthを1秒掛けて500pxにするアニメーションを実現するコードです。

ところで、このanimateメソッド、jQuery最高の教科書という本を読んで知ったのですが、JavaScriptオブジェクトの操作もできるみたいなのです。これだけだとちょっと意味が分からないと思うので、下記にカウントダウンのような動きをするサンプルコードを記してみます。

console.time('count')
$({'count':10}).animate(
    {'count': 0},{
        duration: 10000,
        progress: function(){
            $('#countdown').text(this.count);
        },
        easing: 'linear',
        complete: function(){
            console.timeEnd('count');
        }
    });

こうすることで、{‘count’:10}というJavaScriptオブジェクトを操作して、10秒(10000ミリ秒)で{‘count’:0}という状態にまで変化させます。progressというオプションはアニメーションのステップごとに実行する関数です(参考：.animate() | jQuery 1.9 日本語リファレンス | js STUDIO)。

というわけで、以下実行結果。

ちなみに、console.timeとconsole.timeEndはそれぞれの引数に指定した文字列が同じ組の間の時間をコンソールに表示するメソッドです。試してみると、10秒より少し大きい数値がコンソールに表示されると思います。