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

CSSアニメーションの基礎

自分自身CSSはある程度かけるのですが、CSSアニメーションについてはあまりかけないので今回、自分の勉強がてらこのブログにまとめていこうと思います。 CSSアニメーションには「transition」と

フロントエンド

2020.03.19

jQueryの基礎

今回は、JavaScriptのライブラリのjQueryの基礎部分をまとめていこうと思います。最近ではjQueryは微妙と聞くこともありますが個人的には素のJSよりも触ってみて扱いやすかったので勉強のた

フロントエンド

2020.04.09

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

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

フロントエンド

2020.07.09

Sassの基礎

前々回の記事でSassの環境を整えました( Sassの環境を整える ) 。今までは使うための準備でしたが今回は実際に使っていくための基本的な書き方を学習していきます!Sassにはたくさん書き方や応用で

フロントエンド

2020.05.31

profile

kobayashi kent

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