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


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

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

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。