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

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

目次

1. animate メソッド
2. animate で横に動くアニメーション
3. animate で速度の違うアニメーション

1. 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	アニメーションが完了した時に実行したい処理を指定

　

.animate( properties, options )

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

▲目次へ戻る

　

2. 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 」を指定すると、縦に動くアニメーションを作成することができます。

▲目次へ戻る

　

3. 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 メソッドを必要な数だけ呼び出します。

▲目次へ戻る