JSFiddle - React, Tailwind, and code Playground

by Kleofáš Hatlapatka

HTML

<body>
    <button>Click</button>
        
</body>

CSS

body{margin:0; padding:0;}
.square{
    position:absolute;
    top:50px;
    left:0px;
    width:50px;
    height:50px;
    background-color:blue;
}

.circle{
    position:absolute;
    top:50px;
    left:0px;
    width:50px;
    height:50px;
    background-color:red;
    border-radius:50%;
}

JavaScript

$(document).ready(function(){
    var shape = '<div class="circle" ></div>';
    $("button").click(function(){
         $("body").append( shape );        
    });
                   
    
    
    function animate (){
        setInterval(function(){
            var dissquare    = 500;    
            var speedsquare  = 3000;
            
            
             $( ".circle" ).animate({ "left": "+="+dissquare+"px" },speedsquare, "linear");
             $( ".circle" ).animate({ "left": "-="+dissquare+"px" },speedsquare, "linear");
         })    
    }
    animate();
    
});