javascriptでHTMLの画像を徐々に上に移動させる方法。

前提・実現したいこと

画像を徐々に上に移動していくようにしたいのですが、うまくいきません。
アドバイスいただけたら幸いです。

発生している問題・エラーメッセージ

画像が動かない。

該当のソースコード

js
1let timer;
2let y = 0;
3
4window.onload = function() {
5  top_text = document.getElementById('top_text');
6 timer = setTimeout(function(){
7  
8    if(y <= 50){
9     
10     for(let i = 0 ; i < 51; i++){
11       y++;
12       top_text.style.top ="'" +y +"px'"; 
13     }
14    }
15 },10000);
16};

試したこと

top_text.style.top = "100px";に変更すると徐々にではないですが、上に上がりました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答3件

CSSアニメーションを使用してください。
最近はsetTimeoutやsetIntervalで動かすことは少ないです。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations

投稿2019/07/07 05:50

yasutomi

総合スコア2937

mogumogu22

2019/07/07 09:36

そうなのですね！ｊｓできたほうがいいのかなと思いやってましたが、そこまで必要なかったのですね^^; リンクありがとうございます！

行動規範の内容に同意します

ベストアンサー

setTimeoutは指定した時間が経過したあとに1度だけ処理を実行する命令です。
指定した時間ごとに何度も処理が繰り返し実行されるsetIntervalを使いましょう。

また、提示されたコードではtop_text.style.topに100pxではなく'100px'が代入されてしまいます。

また、top指定は数字が大きくなるほど下になりますのでyをプラスしていくと上ではなく下に移動してしまいます。

javascript
1var y = 100;
2var timerId = setInterval(function() {
3    y--;
4    top_text.style.top = y + "px";
5    if (y <= 0) { clearInterval(timerId ); } // y <= 0 のとき、繰り返し実行を停止
6}, 100);

投稿2019/07/07 01:57

ku__ra__ge

総合スコア4524

mogumogu22

2019/07/07 02:34

回答ありがとうございます^^ 無事上に動かすことができるようになりました！しかし、下記のように変更したのですが、1ｐｘごとに移動してほしかったのですが、何十ｐｘかごとに動いてしまいます。 setIntervalの時間を短くすると一見滑らかに動くように見えるのですが、動きが速すぎてしまいます。 setIntervalをforの中に入れても動きが変わりませんでした。もし原因わかりそうでしたら教えて頂けませんでしょうか？よろしくお願い致します let timer; let y = 0; window.onload = function() { top_text = document.getElementById('top_text'); if(y <= 100){ timer = setInterval(function(){ for(let i = 0 ; i < 51; i++){ y++; top_text.style.bottom = y +"px"; // "100px"; } },1000); } };