x msごとに要素を移動するにはどうすればよいですか？

Question

私は、右に200ピクセル移動したい要素があります。そして、可能な場合は、x msごとにpxを移動したいと思います。

私の現在のコード：

for (var i = 0; i <= 200; i++) { 
    startPos = 300; 
    nextPos = startPos; 
    document.getElementById('ball').style="position:absolute; right:" + nextPos + ";"; 
} 

Answer 1

あなたは​​またはsetTimeoutのいずれかを使用することができます。

for (var i = 0; i <= 200; i++) { 
     startPos = 300; 
     nextPos = startPos; 
     document.getElementById('ball').style="position:absolute; right:" + nextPos + ";"; 
    } 

のsetTimeout：

var ball = document.getElementById('ball'); 
ball.style.position = 'absolute'; 

var interval = 10; // your X MS 
var distance = 0; 

var ticker = setInterval(moveBall, interval); // this function will run every 10ms till the clearInterval() is called. 

function moveBall() { 
    if(distance < 200) { 
     distance++; 
     ball.style.right = 300 + distance + "px"; 
    } 
    else { 
     clearInterval(ticker); 
    } 

} 

requestAnimationFrameの：

var ball = document.getElementById('ball'); 
    ball.style.position = 'absolute'; 

    var distance = 0; 

requestAnimationFrame(moveBall); 

function moveBall() { 
     if(distance < 200) { 
      distance++; 
      ball.style.right = 300 + distance + "px"; 
      requestAnimationFrame(moveball); 
     } 
     else { 
      cancelAnimationFrame(moveBall); 
     } 

    }