JSFiddle - React, Tailwind, and code Playground

by shmish

HTML

<body>Is this it?
    <button id="go">&raquo; Run</button>
    <button id="stop">&raquo; Stop</button>
    <div id="randomFloat">
    <div id="floatName0" style="position: absolute; left:200px; top: 5px">Sarah</div>
    <div id="floatName1" style="position: absolute;">Sarah</div>
    <div id="floatName2" style="position: absolute;">Sarah</div>
    <div id="floatName3" style="position: absolute;">Sarah</div>
    <div id="floatName4" style="position: absolute;">Sarah</div>
    <div id="floatName5" style="position: absolute;">Sarah</div>
    <div id="floatName6" style="position: absolute;">Sarah</div>
    <div id="floatName7" style="position: absolute;">Sarah</div>
    <div id="floatName8" style="position: absolute;">Sarah</div>
    <div id="floatName9" style="position: absolute;">Sarah</div>
    <div id="floatName10" style="position: absolute;">Sarah</div>
    <div id="floatName11" style="position: absolute;">Sarah</div>

</div>

CSS

#randomFloat {
    color: red;
    transition: 0.5s left, 0.5s top;
}

JavaScript

var interval
$( "#go" ).click(function() {
    var gotime = 1;
    interval = setInterval(function () {
      for(i = 0; i < 12; i++){
        var nameofDiv = "#floatName" + i;
        console.log(nameofDiv);
        $( nameofDiv ).animate({
        	left: Math.random()*500 + "px",
        	top: Math.random()*500 + "px"
        });
      };
      gotime += 1;
      if (gotime > 100) {
        clearInterval(interval);
      }
    }, 500) 
  });

  $( "#stop" ).click(function() {
        clearInterval(interval);
  });