「animate()」に関数を設定する「animate()」の活用などの基本的な内容から、応用的な使い方に関しても解説していきます。まとめ「animate()」とは?それでは、まず最初に「animate()」について基本的な知識から学んでいきましょう!「animate()」は、特定のHTML要素のCSSプロパティを連続して変化させることでアニメーションを実現してくれます。単純なh1要素を用意します。<h1>サンプルタイトル</h1>このh1要素に対して「font-size」を80pxに指定すると、初期値から徐々に文字サイズが大きくなるアニメーションになります。アニメーションのスピードや動きの調整も可能で、関数を使った任意の処理を実行することもできます。「color」など数値では設定できないCSSプロパティに関しては指定できないので注意しましょう。「animate()」の使い方この章では、「animate()」の基本的な使い方について見ていきましょう!一般的な構文や実際のプログラミング手法、およびオプション設定などについて学んでいきます。基本的な構文と書き方についてまずは、基本となる構文から見ていきましょう!「animate()」は、対象となるHTML要素にいくつかのオプションを設定して実行するのが基本となります。)一番重要なのが第1引数に指定する「CSSプロパティ」で、それ以外は省略することが可能です。CSSプロパティはオブジェクト形式で記述する必要があります。40}」のようにキャメルケースに置き換えて設定します。その他の引数に関しても、本記事で詳しく解説していきますので参考にしてみてください!CSSを設定したアニメーション方法について「animate()」を使った実際のプログラミング手法について見ていきましょう!まずは、以下のように単純なHTMLを用意します。<h1>サンプルタイトル</h1>このh1要素に対して、文字サイズをズームアップするようなアニメーションを付与するには次のように記述します。80});animate()の引数に注目してください!オブジェクト形式でCSSプロパティの「font-size」を設定していますよね。このように記述することで、初期値の文字サイズから80pxのサイズまでズームアップするアニメーションになります。数値は文字列で指定することも可能です。'80px'});文字列で指定することで、「px」だけでなく「%」なども表現可能なので応用範囲は広いでしょう。次に、オプション設定として「duration」「easing」についても見ていきましょう!どちらも省略可能なオプションではありますが、有効活用することでアニメーションの動きを調整することが可能です。「duration」は、ミリ秒で指定するようになっており、アニメーションが完了するまでの時間を設定できます。「easing」は、アニメーションの挙動を指定可能で、「linear」と「swing」の2種類を文字列で設定します。'swing');この例では、先ほどの「font-size」を利用したサンプルにdurationとeasingを追加したものです。durationが「2000」に設定しているので、つまり2秒間かけてアニメーションが実行されるという意味になります。easingには「swing」が設定されており、デフォルトよりも動きに変化があるのが分かります。「animate()」に関数を設定する「animate()」の引数にはコールバック関数を設定することができるので合わせてご紹介しておきます!基本的な使い方としては、animate()の第4引数にそのまま関数を指定する方法です。console.log('アニメーションが実行されました!');});この例では、アニメーションが実行されたあとすぐに関数内に記述された処理が実行されます。第3引数を省略した状態でも関数を設定することは可能です。console.log('アニメーションが実行されました!');});この場合は、第2引数に関数を設定することになりますが、このようなケースでも正常に動作するように設計されています。ちなみに、関数は無名関数だけでなく通常の関数名を指定することもできます。console.log('イベントが実行されました!');}この例では、「sampeEvent()」という関数を外部に作成しており、その関数名を活用してanimate()に適用しているわけです。「animate()」の活用この章では、「animate()」を活用したアニメーションサンプル例を見ていきましょう!主に、CSSプロパティでよく使われる「opacity」「transform」や、画面スクロールに使える「scrollTop」の使い方を学んでいきいます。1)を指定することでHTML要素の透明度を変化させることができます。animate()と組み合わせることで、HTML要素を少しずつ透明(非表示)にしていくアニメーションを簡単に実現できます。2000);この例では、h1要素に対してanimate()を実行しており、引数に「opacity」を指定して透明度を変化させています。opacityは「0」が完全な透明で「1」が非透明なので、値を「0」にしておけば少しずつ透明になって消えるわけです。2000);この例では、opacityの値を「toggle」としており、このようにすることで透明・非透明を自動で繰り返してくれるのです。「scrollTop」を使ったアニメーションサンプル「scrollTop」を利用するとブラウザの画面移動をアニメーションさせることが可能になります。そのため、例えばWebページの最下段までスクロールした時に最上部へ戻るボタンを作成するのに最適でしょう。0});})この例では、ボタンのクリックイベント処理内でanimate()を実行しているのが分かります。0」と記述されていますが、これは画面の最上部の位置に移動するという意味になります。これにより、ボタンがクリックされるとアニメーションしながら画面が最上部まで戻るアニメーションになるのです。2019年4月3日まとめ今回は、jQueryでHTML要素にアニメーション効果を付与できる「animate()」について学習をしました!最後に、もう一度ポイントをおさらいしておきましょう!animate()は引数にCSSプロパティをオブジェクト形式で付与するdurationはミリ秒で指定し、easingは文字列で指定するコールバック関数を設定するとアニメーションのあとに実行される上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人マサトフリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。