Q&A
以下はjQueryで作ったdiv要素が拡大＋移動するアニメーションです。
こちらのサイトを参考に作りました。
https://www.softel.co.jp/blogs/tech/archives/4286
html
1<html> 2<head> 3<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> 4<style type="text/css"> 5<!-- 6div.box { 7 background-color: orange; 8 height: 200px; 9 width: 200px; 10} 11--> 12</style> 13</head> 14<div id="box" class="box"></div> 15<br> 16<script> 17$("#box").animate({paddingRight: 1},{ 18 duration: 5000, 19 queue: false, 20 step: function(now){ 21 $(this).css({transform:"scale(" + now + ")"}); 22 $(this).animate({"marginTop": 500 * now + "px"}); 23 } 24,}); 25</script> 26</body> 27</html>
拡大（0倍→1倍）はduration: 5000すなわち5秒で完了するのですが、移動（margin-top 0px→500px）はなぜか非常に長い時間がかかってしまいます。（Chrome、Firefox、IE、Edgeにて確認）
これはなぜなのでしょうか。そして、animateをduration内で完了させるにはどうしたらよいでしょうか。
なお、普通に
html
1// コメントアウトする 2// $(this).animate({"marginTop": 500 * now + "px"}); 3 4// 追加する 5$("#box").animate({"marginTop": "500px"}, 6 {queue: false, duration: 5000} 7);
とすれば拡大と移動が同時に5秒でおこなわれますが、将来的により複雑な動きをさせたいので移動にもfunction(now)を使いたいです。
回答1件
0
ベストアンサー
step関数の中でanimateを使っているのが原因です
■なぜ５秒で終わらないのか、marginTopだけ長い時間かかってしまうのか
setp: function(now){}の中で
$(this).animate({"marginTop": 500 * now + "px"});
のようにstep関数の中でanimateを使っています、まずここに問題があります。
stepはアニメーションの最中に呼び出される関数で、複数回実行されます。
step関数の中にconsole.log(now)とか書いてみるとわかりますが、今回の例ですと250~300回ほど実行されています。
その複数回のなかでanimateを実行すると、animateも複数回設定されます。
animateはdurationを明記しない場合はデフォルトでduration:400となるようになっています。
https://api.jquery.com/animate/#duration
つまり400ミリ秒のアニメーションが250~300個ほど設定されます。
総計400*300で120000ミリ秒（120秒）ほど終了までに時間を要するというわけです。
そもそも参考サイトの記事はtransformプロパティがjQueryのanimateで使えないことを他のライブラリ等を使わずに解決するための手法を解説したものです。
本来であればtransformとmargin-topなど、複数のアニメーションを同時に指定する場合は、animate().animate()のように２つ繋げて書けば実現できます。
無理にstep関数の中で処理する必要はないと思います。
jQuery
1$("#box").animate({paddingRight: 1},{ 2 duration: 5000, 3 queue: false, 4 step: function(now){ 5 $(this).css({transform:"scale(" + now + ")"}); 6 } 7}).animate({marginTop:'500px'}, { 8 duration: 5000, 9});
アニメーションを遅らせる場合にはdelay()という関数もあるので、調べてみて下さい。
また今回は
将来的により複雑な動きをさせたいので移動にもfunction(now)を使いたい
とのことでしたので、こんな感じでanimateをcssに書き換えればとりあえずstep関数内で実現できます。
https://codepen.io/mattari-panda/pen/oNzPgWJ
jQueryのアニメーションは結構複雑なことができるので、公式サイト等で調べて見て下さい。
https://api.jquery.com/animate/
投稿2021/01/10 12:07
編集2021/01/10 14:22
総合スコア429
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/01/10 14:27