各ステップで遅延を持つdivを移動する方法

Question

私は右側に移動する必要があるdivがあります。入力がsteps = 1000と言う場合、divは50の増分で右側に移動する必要があります。この動きを50のステップのように見せて、50秒から100秒まで数秒停止させる必要があります。

<button>Start</button> 

<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div> 

<script type="text/javascript"> 
    $("button").click(function(){ 
     var steps = 1000; 
     for(var i =0; i<=steps; i+50) 
     { 
      $("div").animate({left: i+'px'}); 
     } 
    }) 
</script> 

Answer 1

JSでこのような何か試してみてください：

setInterval(function() { 
    elem.style.left = (left += 10) + "px"; 
}, 100); 

Working Fiddle

Answer 2

50でステップを持つことが、これにごforループを変更しよう：

を210