ITコラム

jQuery

2018.07.31

jQuery【 animate 】アニメーションを作成

jQuery の animate メソッドを使用すると、簡単なアニメーションを作成することができます。
今回は、jQuery の animate メソッドについてサンプル等を紹介したいと思います。

１．animate メソッド

　
jQuery の animate メソッドは、引数に以下の項目を指定してアニメーションを作成します。

animate メソッドの引数は、次のように 2 通りの記述方法があります。

$(セレクタ).animate(properties [, duration] [, easing] [, complete]);

$(セレクタ).animate(properties, options);

そして、animate メソッドの引数の内容は、それぞれ以下の通りです。

.animate( properties [, duration] [, easing] [, complete] )

properties 最終形の CSS の値を指定

duration アニメーションする時間をミリ秒単位で指定
初期値:400

easing イージングの種類を指定
初期値:swing

complete アニメーションが完了した時に実行したい処理を指定

properties	最終形の CSS の値を指定
duration	アニメーションする時間をミリ秒単位で指定初期値:400
easing	イージングの種類を指定初期値:swing
complete	アニメーションが完了した時に実行したい処理を指定

.animate( properties, options )

properties

最終形の CSS の値を指定
　

options

duration
アニメーションする時間をミリ秒単位で指定（初期値:400）

easing
イージングの種類を指定（初期値:swing）

queue
falseを指定すると、キューに追加されずに即座にアニメーションを実行できる（初期値:true）
追加するキューを文字列で指定することも可能

specialEasing
CSSプロパティのマップ値を指定するとその効果がイージングに反映

step
各要素の各プロパティから呼び出される関数で、アニメーションのフレームが進むたびに実行する処理を指定

progress
各アニメーションのステップ後に、アニメーション要素毎に 1 度だけ呼び出される関数

complete
アニメーションが完了した際に呼びだされる関数

done
アニメーション完了後に呼び出される関数

fail
アニメーションの完了が失敗した際に呼び出される関数

always
アニメーションが完了又は停止した際に呼び出される関数

properties
最終形の CSS の値を指定
options
duration アニメーションする時間をミリ秒単位で指定（初期値:400） easing イージングの種類を指定（初期値:swing） queue falseを指定すると、キューに追加されずに即座にアニメーションを実行できる（初期値:true）追加するキューを文字列で指定することも可能 specialEasing CSSプロパティのマップ値を指定するとその効果がイージングに反映 step 各要素の各プロパティから呼び出される関数で、アニメーションのフレームが進むたびに実行する処理を指定 progress 各アニメーションのステップ後に、アニメーション要素毎に 1 度だけ呼び出される関数 complete アニメーションが完了した際に呼びだされる関数 done アニメーション完了後に呼び出される関数 fail アニメーションの完了が失敗した際に呼び出される関数 always アニメーションが完了又は停止した際に呼び出される関数

▲目次へ戻る

２．animate で横に動くアニメーション

　
animate メソッドを使用して、ボックスが横に動くアニメーションを作成します。
往ボタン、復ボタンの順にクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("#btn1").click(function() {
    $("#box1").animate({
      marginLeft:"95%"
    });
  });
  $("#btn2").click(function() {
    $("#box1").animate({
      marginLeft:"0px"
    });
  });
});
//-->
</script>

<div style="background-color : #CCC; padding : 20px 20px 3px;">
  <div id="box1" style="height:30px; width:30px; background-color:mediumorchid;"></div>　
  <input type="button" id="btn1" value="往">　<input type="button" id="btn2" value="復">
</div>

上のサンプルは「 .animate( properties [, duration] [, easing] [, complete] ) 」の記述方法で、プロパティのみを指定しています。

通常の CSS ではハイフン（ – ）を使って「 margin-left 」と記述するようなプロパティを、animate メソッドでは、単語間の最初の文字を大文字にするキャメルケースという書式で「 marginLeft 」と記述します。

また、「 marginLeft 」の代わりに「 marginTop 」を指定すると、縦に動くアニメーションを作成することができます。

▲目次へ戻る

３．animate で速度の違うアニメーション

　
animate メソッドを使用して、速度の違うアニメーションを作成します。
各ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("#btn3").click(function() {
    $("#box2")
      .animate({marginLeft:"95%"}, 100)
      .animate({marginTop:"+=50px"}, 100)
      .animate({marginLeft:"0px"}, 100)
      .animate({marginTop:"-=50px"}, 100)
  });
  $("#btn4").click(function() {
    $("#box2")
      .animate({marginLeft:"95%"}, 700)
      .animate({marginTop:"+=50px"}, 700)
      .animate({marginLeft:"0px"}, 700)
      .animate({marginTop:"-=50px"}, 700)
  });
});
//-->
</script>

<div style="background-color : #CCC; padding : 20px 20px 3px;">
  <div id="box2" style="height:30px; width:30px; background-color:crimson;"></div>　
  <input type="button" id="btn3" value="100ミリ秒">　<input type="button" id="btn4" value="700ミリ秒">
</div>

上のサンプルは「 .animate( properties [, duration] [, easing] [, complete] ) 」の記述方法で、時間（ duration ）まで指定しています。

1 つのアクションで複数の動き（上のサンプルでは右→下→左→上）を設定する場合は、上記のように記述して animate メソッドを必要な数だけ呼び出します。

▲目次へ戻る