.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関数について理解できたところで、ここでは実際にアニメーションを作っていきたいと思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <title>animate sample</title> <!-- jQueryを読み込む --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- アニメーションの実装：ここから --> <script> $(document).ready(function(){ // btn1をクリックしたら縦横を500pxにする $("#btn1").click(function(){ $("#box").animate({height:"500px", width:"500px"}); }); // btn2をクリックしたら縦横を50pxにする $("#btn2").click(function(){ $("#box").animate({height:"50px", width:"50px"}); }); }); </script> <!-- アニメーションの実装：ここまで --> </head> <body> <button id="btn1">拡大</button> <button id="btn2">縮小</button> <div id="box" style="background:#ff7f50; height:50px; width:50px; margin:10px;"></div> </body> </html> |
実行結果
縮小時
拡大時
- PG
- えっ…！animate関数を使えば、こんな数行でアニメーションができちゃうんですか？
- PM
- はい、もちろんです。jQueryのコンセプトは「write less, do more（少ない記述で多くのことをする）」ですからね。Webアプリケーションを作る際にも活用してみてください。
jQueryのアニメーション機能でカッコいいWebサイトを作ろう
今回は、jQueryのanimate関数の概要や実際の使い方について解説していきました。ソースコードを見ていただいたとおり、jQueryではほんの数行で要素に変化を加えることができます。animate関数を活用し、ユーザーが見ていて楽しいWebサイトを作ってみてはいかがでしょうか。
