javascript - How To Change Div Position Dynamically, It Must be Absolute Position in for loop -

how can apply div position x value variable? , how iterate in loop?

<div id="object"></div> <style>   #object{     position:absolute;     width:10px;     height:10px;     background:#ff8800;   } </style> <script>   function play(){     // here how add div position variable , applaying of iteration in forloop     // how change position of in loop     for(){      }     // strucked @ here   }  </script> 

try logic of play , stop ui elements .

 var speed = 5;          function play(){              if($("#object").data("play"))              {                 settimeout(function(){  			   var count = $("#object").position().left;  				count += speed;  				$("#object").css("left",count);                  requestanimationframe(play);  			  },500);              }          }          $("#play").click(function(){              $("#object").data("play",true);            $('#object').css('background','green');  			play();  			$('#stop').css('display','block');          });          $("#stop").click(function(){              $("#object").data("play",false);              $('#object').css('background','#ff8800');  			$('#stop').css('display','none');          });

 input      {      position:absolute;      width:50px;      height:25px;      top:100px;      }      #play      {      background:green;  	border:none;  	color:#fff;  	border-radius:15px;      left:35px;      }      #stop      {  	background:#ff8800;  	border:none;  	border-radius:15px;  	color:#fff;      left:35px;  	display:none;      }      #object{      position:absolute;      width:10px;      height:10px;      background:#ff8800;      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>   <div id="object"></div>      <input id="play" type="button" value="play">      <input id="stop" type="button" value="stop">