jQuery アニメーション

animate()メソッドはウェブページにカスタムアニメーションを追加するためのメソッドです。

animateメソッドの基本構文

animate()メソッドの基本的な構文は以下の通りです。

$(selector).animate({params}, speed, callback);

• params: アニメーションを適用するCSSプロパティとその値を指定します。
• speed: アニメーションの速度を指定します。ミリ秒単位で指定するか、”slow”、”fast”という文字列で指定することも可能です。
• callback: アニメーションが終了した後に実行する関数を指定します。

animateメソッドの使用例

例えば、以下のコードでは、IDが”box”の要素の高さと幅を2秒かけて200pxにアニメーションしながら変更しています。

<button id="start">アニメーション開始</button>
<div id="box" style="width: 100px; height: 100px; background-color: pink;"></div>

<script>
$("#start").click(function(){
  $("#box").animate({
    height: "200px",
    width: "200px"
  }, 2000);
});
</script>

これで、”アニメーション開始”ボタンをクリックすると、四角形のdiv要素がゆっくりと大きくなるアニメーションが見られるようになりました。

stop()メソッド

スタートに対して、停止のメソッドもあります。

stop()メソッドは、指定した要素に対して実行中のアニメーションを停止します。

これにより、ユーザが連続的にアクションを行うとき（例えば、ボタンを素早くクリックするなど）、予期しないアニメーションのキューが蓄積されるのを防ぐことができます。

stop()メソッドは2つのオプションを引数として受け取ることができます。

1. clearQueue: デフォルトはfalseです。trueに設定すると、現在実行中のアニメーションだけでなく、待機中のアニメーションも全てクリアします。
2. jumpToEnd: デフォルトはfalseです。trueに設定すると、アニメーションを停止するときに最終状態にジャンプします。

以下にstop()メソッドを使用した例を示します。

<button id="start">スタート</button>
<button id="stop">ストップ</button>
<div id="animatedDiv" style="width:80px;height:80px;background-color:skyblue;"></div>

<script>
$(document).ready(function(){
  $("#start").click(function(){
    $("#animatedDiv").animate({height: "300px"}, 7000);
  });
  $("#stop").click(function(){
    $("#animatedDiv").stop();
  });
});
</script>

「スタート」ボタンをクリックするとボックスの高さが7秒かけて300pxに増え、途中で「ストップ」ボタンをクリックするとアニメーションが停止します。