【jQuery】animate関数の使い方を解説します【初心者向け】

jQuery

今回は便利だけど少し癖のあるanimate関数を注意点を含めて解説していきます。

スポンサーリンク

animate関数の基本的な使い方

animate関数の構文は以下になります。

$(selector).animate(params, [duration], [easing], [callback])

selectorは変更したい要素を書き込みます。

paramsはアニメーション後のCSSプロパティ群を書き込みます。

durationはアニメーション開始から終了までの時間を指定します。

easingはアニメーションの実行速度に緩急をつけます。

  • linear:一定速度で動く
  • swing:出だしは遅く、後半は早い

callbackはアニメーションが終了した後に実行する機能を記述します。

animate関数の使い方の注意点

animate関数の使い方の注意点は以下の2点になります。

  • cssのプロパティはキャメルケースで書く
  • animate関数は基本的に数字しか変更できない

cssのプロパティはキャメルケースで書く

animate関数ではparmsの中のcssプロパティはキャメルケースで書く必要があります。

例えば、padding-leftを変更したい場合、paddingLeftと書きます。

animate関数は基本的に数字しか変更できない

animate関数では基本的に数字のパラメータで指定するcssしか変更できません。
例えば、以下のようなものです。

  • padding
  • margin
  • width
  • height
  • opacity
  • fontSize
  • zIndex

もし色をanimate関数で変更したい場合、Color Animations pluginをjQuery.comからダウンロードする必要があります。

animate関数の使い方の例

下の動かしてみるボタンを押すとアニメーションが実行されます。
トグルが上下にスライドしながら現れたり、消えたりします。

コードは以下の通りです。

HTML:

<button class="toggle-btn">動かしてみる</button>
<div class="toggle-change"></div>

CSS:

.toggle-change{
    background:#98bf21;
    height:100px;
    width:100px;
}

JavaScript:

$(document).ready(function(){
   $(".toggle-btn").click(function(){
     $(".toggle-change").animate({height: 'toggle'});
   });
 });

今回は以上になります。
最後まで読んでくださってありがとうございました。

タイトルとURLをコピーしました