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

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

1. animate メソッド

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

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

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

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

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

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

.animate( properties, options )

▲目次へ戻る

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

▲目次へ戻る

4. まとめ

jQueryの animate メソッドについて、いかがでしたでしょうか。

「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。

今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る