jQueryのアニメーション機能を使ってできること

Webサイトを作成していると、「途中でボックスの色を変えたいな」「ここをフェードインさせたいな」と思うことがあるのではないでしょうか。そこで、ぜひ活用してほしいのがjQueryのアニメーション機能です。「animate関数」という関数を使えば、どのタイミングで、どれくらいの速さで、などの設定を行いながら、数行でアニメーションを実装することができます。

プログラマー

アニメーションと聞くとすごくハードルが高そうですけど……。

プロジェクト
マネージャー

大丈夫ですよ。jQueryでは「ここにアニメーションを設定して」という要素を指定するだけで、簡単に要素を動かしたり色を変えたりすることができます。

jQueryのanimate関数とは？

jQueryでは、アニメーションを作るための関数として「animate関数」というものが用意されています。「animate関数」とは、jQuery1.4から追加された、CSSの値を指定してアニメーションを表現する機能です。他にも、toggleやhideなどの関数が存在しますが、より柔軟に要素を動かしたい場合は「animate関数」が最適です。

animate関数を使うと、以下のようなことが簡単にできます。

animate関数を実際に使ってみよう

animate関数について理解できたところで、ここでは実際にアニメーションを作っていきたいと思います。

実行結果
縮小時

拡大時

プログラマー

えっ…！animate関数を使えば、こんな数行でアニメーションができちゃうんですか？

プロジェクト
マネージャー

はい、もちろんです。jQueryのコンセプトは「write less, do more（少ない記述で多くのことをする）」ですからね。Webアプリケーションを作る際にも活用してみてください。

jQueryのアニメーション機能でカッコいいWebサイトを作ろう

今回は、jQueryのanimate関数の概要や実際の使い方について解説していきました。ソースコードを見ていただいたとおり、jQueryではほんの数行で要素に変化を加えることができます。animate関数を活用し、ユーザーが見ていて楽しいWebサイトを作ってみてはいかがでしょうか。