jQueryのanimate()で指定する時間は？

jQueryのanimate()で指定する時間

jQueryのanimate()メソッドは、要素のスタイルを滑らかに変化させるアニメーションを実現するための強力なツールです。このメソッドを使う際に、アニメーションにかける時間を指定する必要がありますが、この時間指定は一体どのような単位で行うのでしょうか？

animate() で指定する時間の単位

animate() で指定する時間は、「ミリ秒（ms）」で行います。「ミリ秒」と聞くと少し難しく感じるかもしれませんが、「1秒 = 1000ミリ秒」と覚えておけば大丈夫です。

つまり、animate() で

1000 を指定すると、アニメーションは1秒かけて実行されます。
500 を指定すると、アニメーションは0.5秒（500ミリ秒）かけて実行されます。

以下は、アニメーション時間を「ミリ秒」で指定した例です。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>animate() の時間指定</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#startBtn").click(function(){
    $("#box").animate({left: "200px"}, 1000); // 1秒かけて左へ移動
  });
});
</script>
</head>
<body>
<button id="startBtn">スタート</button>
<div id="box" style="background-color:red; width:50px; height:50px; position:absolute;"></div>
</body>
</html>

このコードでは、「スタート」ボタンをクリックすると、赤い四角が1秒かけて左へ200px移動します。animate() の第二引数に 1000 を指定することで、アニメーション時間を1秒（1000ミリ秒）に設定しています。

アニメーション時間早見表

よく使うアニメーション時間をまとめた表を以下に示します。

ミリ秒	秒	説明
250	0.25秒	非常に短いアニメーション
500	0.5秒	短いアニメーション
1000	1秒	標準的なアニメーション
2000	2秒	少し長いアニメーション

参考資料

jQuery.animate() | jQuery API Documentation

よくある質問

Q1: アニメーション時間を秒単位で指定することはできますか？

A1: いいえ、animate() メソッドではアニメーション時間をミリ秒単位で指定する必要があります。

Q2: アニメーション時間を指定しないとどうなるのでしょうか？

A2: アニメーション時間を指定しない場合、デフォルト値である 400 ミリ秒（0.4秒）でアニメーションが実行されます。

Q3: アニメーション速度を「slow」「fast」のような文字列で指定することはできますか？

A3: はい、可能です。animate() メソッドでは、ミリ秒単位の数値の代わりに "slow", "fast", "normal" といった文字列でアニメーション速度を指定することもできます。それぞれ、2000ミリ秒、600ミリ秒、400ミリ秒に相当します。

その他の参考記事:jquery アニメーション一覧