で指定する時間は.png)
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秒 | 少し長いアニメーション |
参考資料
よくある質問
Q1: アニメーション時間を秒単位で指定することはできますか？
A1: いいえ、animate() メソッドではアニメーション時間をミリ秒単位で指定する必要があります。
Q2: アニメーション時間を指定しないとどうなるのでしょうか？
A2: アニメーション時間を指定しない場合、デフォルト値である 400 ミリ秒（0.4秒）でアニメーションが実行されます。
Q3: アニメーション速度を「slow」「fast」のような文字列で指定することはできますか？
A3: はい、可能です。animate() メソッドでは、ミリ秒単位の数値の代わりに "slow", "fast", "normal" といった文字列でアニメーション速度を指定することもできます。それぞれ、2000ミリ秒、600ミリ秒、400ミリ秒に相当します。
その他の参考記事:jquery アニメーション 一覧