kokeblog

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

    関連記事

    Sassの基礎

    CSSアニメーションの基礎

    jQueryのeachメソッドの使い方

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

    カテゴリー