.net column

.NET開発者のためのブログメディア
アプリケーション作成

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

2020年04月02日

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

PG
アニメーションと聞くとすごくハードルが高そうですけど……。
PM
大丈夫ですよ。jQueryでは「ここにアニメーションを設定して」という要素を指定するだけで、簡単に要素を動かしたり色を変えたりすることができます。

jQueryのanimate関数とは?

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

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

・要素をフェードインまたはフェードアウトする
・画面をスクロール時にボックスの色を変化させる
・ユーザーが画面一番下までスクロールしたときに「トップへ戻る」を表示する

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

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

実行結果
縮小時
縮小時
拡大時
拡大時

PG
えっ…!animate関数を使えば、こんな数行でアニメーションができちゃうんですか?
PM
はい、もちろんです。jQueryのコンセプトは「write less, do more(少ない記述で多くのことをする)」ですからね。Webアプリケーションを作る際にも活用してみてください。

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

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


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)