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

colmun_main11335

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

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です