jQueryを使ってアニメーションを再生するときは、$(‘ ’).animate({})を使用しますよね。
animateのdurationというコードを指定してあげることでアニメーションが完了するまでの時間をカスタマイズすることができます。
今回はanimateを1秒で完了させる方法を紹介します。
はじめに
今回紹介する方法では「jQuery」を使います。
jQueryを使う準備が整っていないという方は先に済ませておきましょう。
jQueryというのはwebサイトをカスタマイズするときなどで使えるコードのこと。
これを使うことによってcssだけでは手の届かなかった動作を実現させることができるのです。
jQueryのアニメーション
jQueryでアニメーションをする時は、以下のようなコードを使うと思います。
$('XXX').animate{
"width":'100%'
}
このようなコードを書くと、XXXという要素の横幅をいっぱいまで大きくすることができます。
(animateを呼び出すタイミングなどのコードはここでは記述していないので、各自追加してくださいね）
では、例えばこのコードの実行を1秒で完了してほしいというときにはどのようなコードを書けば良いのでしょうか。
実はdurationを指定してあげることによって、簡単に設定できます。
そもそもdurationって？
durationというのは
のように書くことで命令を出すことができます。
このように書くと//duration秒で処理が完了する、
という内容になっています。
実際に時間を指定しよう
先ほど「duration」について説明しました。
では実際にアニメーションを1秒で完了させるコードを書いてみましょう。
$(this).animate({
'width': '100%'
},
1000
);
このようになりました。
ここで紹介したコードでは分かりやすいように、構成を分けて記述しているのですが、もちろん以下のように書いても動作します。
$(this).animate({'width': '100%'}, 1000);
今回のような単純な処理であれば、1行にまとめてしまって問題なさそうですね。
ちなみに以下のように記述することもできます。
$(this).animate({
' width': '100%'
}, {
duration: 1000
});
今回は「1秒で完了させる」というものでしたのでdurationは「1000」になりました。
animateで指定するdurationの値は「ミリ秒」なので1000msで１秒になります。
10秒なら10000、0.5秒なら500というように値を調整してみてください。
まとめ
今回紹介した方法を使えば、jQueryで実行したアニメーションを完了させるまでにかかる時間を調整することができます。
何も記述しなくても動作するにはするのですが、○秒で実行したい箇所ができたときのために覚えておくようにしましょう。
ではまた。
