jQueryのanimate関数について

2020年04月17日

フロントエンド

今回は、jQueryの学習の続きということでanimate()についてまとめていきます。

animate関数とは?

まず、animate関数とは何なのかについてです。animate関数はjQueryで扱えるもので特定のHTMLに対してアニメーションさせることができます。アニメーションできるのは数値で指定できるものだけになるのでそこは注意して使いましょう。例えばmarginやwidthなどであればanimate関数でアニメーションできます。逆にできないのはcolorやdisplayなど数値で指定できない様なプロパティですね。

animate関数の使い方

基本的な使い方をまとめていきます。

animate関数は対象のHTMLにいろいろと設定して実行していくのが基本です。

animate関数の基本的な書き方

animate( params, duration, easing, callback )

一番最初に書いてあるparams以外は省略可能です。

あまりよくわからない様な単語が並んでいますね。ひとつづつ解説していきます。

paramsはアニメーション後のCSSを指定します。複数の指定ができます。他のものは省略できますがこのparamsは省略できません。ここでよく使いそうなプロパティはopacityなどですかね。

durationについてです。アニメーション開始から終了までの時間を指定します。CSSアニメーションでも出てきましたね。指定できるのはnormal、fast、slow、数字です。normalは初期値でfastはnormalよりも早く、slowはnormalよりも遅くアニメーションします。文字そのままの意味ですね。数字での指定はミリ秒で指定します。例えば1000と指定すれば1秒かけてアニメーションします。500なら0.5秒といった感じです。

easingはアニメーションの変化量を調節をできます。linearとswingを指定できます。linearは一定のスピードでアニメーションします。CSSアニメーションでも出てきましたね。swingは始めと終わりはゆっくりで途中は早めにといった感じです。

callbackはアニメーション後の処理を記述できます。function(){}の中に処理を書きます。

基本的な書き方についてまとめましたので次は具体的な例としてanimate関数を使ったコードを書いていきます。

animate関数を使った例

まず最初にボタンをクリックしたときにopacityを0にして消える処理をアニメーションされるものです。前回のjQueryの基礎で学んだものを組み合わせて実装してみました。paramsを指定するときはこのように書けばOKです。

次にdurationとeasingを指定してアニメーションさせてみます。上のアニメーションを3秒間かけて一定のスピードで処理しています。

最後にcallbackを指定したものを実装してみます。アニメーション後にアニメーション後の処理といったようなアラートが表示されます。

まとめ

animate関数についてまとめてきました。ヘッダーに戻るボタンを実装しようと調べているとよくanimate関数が使われるのをよく見たので今回でちゃんと理解できてよかったです。次は今まで学んできたことを使ってコピペで実装してきたヘッダーに戻るボタンなど実際にあるような機能を自力で実装してみてまた記事で言葉にしてまとめていけたらと思います。

Pocket

related

Markdown記法備忘録

前回の記事でHexoを使ってサイトを制作しましたが、そのサイトの記事を書いていくには、Markdown記法を使う必要があります。いつもWordPressのGUIで記事を更新している私にとってはあまり馴

フロントエンド

2020.09.13

three.jsジオメトリについて

前回、three.jsで簡単なものを表示させる手順についての記事を書きましたが、今回はジオメトリに重点を置いてまとめていきます。実際に形を形成していくので結構楽しい部分かなと思います。 立方体 THR

フロントエンド

2020.11.08

よく使うjQueryメソッド備忘録

結構jQueryを触っていてこのメソッドどうやって書くんだっけと、ついど忘れしてしまうときがあって、いちいちそのためにググってというのもめんどくさいので、備忘録としてここにまとめておきます。今後もなに

フロントエンド

2020.07.09

jQueryでよくあるフェードインを作る

今回は、jQueryとCSSアニメーションを組み合わせて、Webサイトでよく使われているようなスクロールしていくと要素がフェードインするのを作っていこうと思います。 スクロールしたら表示されるようにす

フロントエンド

2020.06.28

profile

kobayashi kent

トライデントコンピューター専門学校Webデザイン学科
アニメとかゲームとか音楽聴くのが好き