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

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

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

最終更新日：2023年6月30日

1. animateメソッド

jQuery の animate は自作のアニメーションを作成するための関数になります。
「完了後(最終形)のCSS」を指定すると、現在の値から指定したCSSの値に変化するようにアニメーションが行われます。

▲目次へ戻る

2. animateメソッドの構文

animate メソッドの構文は 以下の通りです。

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

properties	最終形の CSS の値を指定 ここで指定したCSSに徐々に変化するようなアニメーションが行われます
duration	アニメーションする時間をミリ秒単位で指定 指定しない場合:400ミリ秒が適用されます
easing	イージング（エフェクトの加速／減速の動作タイプ）の種類を指定 指定しない場合：swing（最初と最後だけゆっくり）が適用されます
complete	アニメーションが完了した時に実行させたい処理（関数）を指定 指定しない場合：完了後に何も実行しません

▲目次へ戻る

3. 横に動くアニメーション

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

ソースコードは次の通りです。

■ HTML

<div class="graybox">
    <div id="box1" class="purplebox"></div>
    <input type="button" id="btn1" value="右へ移動">
    <input type="button" id="btn2" value="左へ移動">
</div>

■ CSS

.graybox {
  background-color : #cccccc;
  padding : 20px 20px 3px;
}
.purplebox {
  width:30px;
  height:30px;
  margin-bottom: 10px;
  background-color: #ba55d3;
}

■ jQuery

$(function() {
    $("#btn1").click(function() {
        $("#box1").animate({
            marginLeft:"95%"
        });
    });

    $("#btn2").click(function() {
        $("#box1").animate({
            marginLeft:"0px"
        });
    });
});

ここではanimateのpropertiesのみを指定しています。
box1に対して marginLeft を指定しているので 400ミリ秒かけてmergin-leftが指定した値に変化します。
※時間の指定はないので、400ミリ秒かけて実行されます。

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

margin-left  →  merginLeft

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

▲目次へ戻る

4. 時間を指定したアニメーション

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

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

■ HTML

<div class="graybox">
  <div id="box2" class="redbox"></div>
    <input type="button" id="btn3" value="1秒で一周させる">
    <input type="button" id="btn4" value="4秒で一周させる">
  </div>
</div>

■ CSS

.graybox {
  background-color : #cccccc;
  padding : 20px 20px 3px;
}
.redbox {
  width:30px;
  height:30px;
  margin-bottom: 10px;
  background-color: #dc143c;
}

■ JQuery

$(function() {
  $("#btn3").click(function() {
    $("#box2")
      .animate({marginLeft:"95%"}, 250)
      .animate({marginTop:"+=50px"}, 250)
      .animate({marginLeft:"0px"}, 250)
      .animate({marginTop:"-=50px"}, 250)
  });
  $("#btn4").click(function() {
    $("#box2")
      .animate({marginLeft:"95%"}, 1000)
      .animate({marginTop:"+=50px"}, 1000)
      .animate({marginLeft:"0px"}, 1000)
      .animate({marginTop:"-=50px"}, 1000)
  });
});

上のサンプルは時間（ duration ）を指定しています。
また、.animate()を連続で実行することで複雑な動きを実現しています。

.animate({marginLeft:"95%"}, 250)    // 250ミリ秒かけてmarginLeftを"95%"に変更（右に移動）
.animate({marginTop:"+=50px"}, 250)  // 250ミリ秒かけてmarginTopを50px加算（下に移動）
.animate({marginLeft:"0px"}, 250)    // 250ミリ秒かけてmarginLeftを0pxに変更（左に移動）
.animate({marginTop:"-=50px"}, 250)  // 250ミリ秒かけてmarginTopを50px減算（上に移動）

※「1秒で一周させる」を押した場合は 4つのanimateに 250の数値を指定しているので 合計1000ミリ秒、つまり1秒かけてCSSが変化します
※「4秒で一周させる」方は それぞれ 1000の数値を指定しているので 4秒かけてCSSが変化します

▲目次へ戻る

5. アニメーションの種類を変更

今度は処理時間は同じで、途中の速度の違うアニメーションを作成します。
各ボタンをクリックしてみて下さい。

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

■ HTML

<div class="graybox">
  <div id="box3" class="greenbox"></div>
    <input type="button" id="btn5" value="最初と最後だけゆっくり">
    <input type="button" id="btn6" value="同じ速度で移動">
  </div>
</div>

■ CSS

.graybox {
  background-color : #cccccc;
  padding : 20px 20px 3px;
}
.greenbox {
  width:30px;
  height:30px;
  margin-bottom: 10px;
  background-color: #166f26;
}

■ JQuery

$(function() {
  $("#btn5").click(function() {
    $("#box3")
      .animate({marginLeft:"95%"}, 1000, 'swing')
      .animate({marginTop:"+=50px"}, 1000, 'swing')
      .animate({marginLeft:"0px"}, 1000, 'swing')
      .animate({marginTop:"-=50px"}, 1000, 'swing')
  });
  $("#btn6").click(function() {
    $("#box3")
      .animate({marginLeft:"95%"}, 1000, 'linear')
      .animate({marginTop:"+=50px"}, 1000, 'linear')
      .animate({marginLeft:"0px"}, 1000, 'linear')
      .animate({marginTop:"-=50px"}, 1000, 'linear')
  });
});

ここでは「最初と最後だけゆっくり」には 初期の‘swing’を指定し、「同じ速度で移動」には‘linear’を指定しています。
それぞれのボタンでトータルの時間は同じ4秒でも、途中の動きの速度が違うことが確認できます。

▲目次へ戻る

6. アニメーション後に実行させる処理を追加する

最後はアニメーション完了後に任意の関数を実行させます。
ボタンをクリックしてください。アニメーション完了後、アラートが表示されます。

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

■ HTML

<div class="graybox">
  <div id="box4" class="greenbox"></div>
    <input type="button" id="btn7" value="アニメーション後にアラートを表示">
  </div>
</div>

■ CSS

.graybox {
  background-color : #cccccc;
  padding : 20px 20px 3px;
}
.yellowbox {
  width:30px;
  height:30px;
  margin-bottom: 10px;
  background-color: #ffea00;
}

■ JQuery

$(function() {
  $("#btn7").click(function() {
    $("#box4")
      .animate({marginLeft:"95%"}, 250, 'swing')
      .animate({marginTop:"+=50px"}, 250, 'swing')
      .animate({marginLeft:"0px"}, 250, 'swing')
      .animate({marginTop:"-=50px"}, 250, 'swing', function() {
        alert("動作完了");
      })
  });
});

アニメーションが終わった直後に実行させたい処理がある場合、このように関数を追記することで実現できます。

参考にしたいアニメ動画を探すのであれば、動画配信サービスを使えば見放題で視聴できるのでおすすめです。

▲目次へ戻る