Loading rounds JQuery

by Martin Miranda

HTML

<div id="container">
        <div id="roundBlue" class="round" data-round="round1"></div>
        <div id="roundYellow" class="round" data-round="round2"></div>
        <div id="roundRed" class="round" data-round="round3"></div>
        <div id="roundGreen" class="round" data-round="round4"></div>
    </div>

CSS

body,html{
    width:100%;
    height:100%;
    margin:0 0;
    padding:0 0;
    background-color:rgba(10,20,24,1);
}
*{
    box-sizing:border-box;
}

#container{
    position:relative;
    margin:0 auto;
    width:100px;
   top:40%;
}
.round{
    width:35px;
    height:35px;
    border-radius:50%;
    position:absolute;
    left:0;
    top:0;
}
#roundBlue{
    background-color:rgba(0,200,250,1);
    z-index:9;
}
#roundYellow{
    background-color:rgba(250,210,0,1);
    z-index:8;
}
#roundRed{
    background-color:rgba(250,50,50,1);
    z-index:7;
}
#roundGreen{
    background-color:rgba(120,250,50,1);
    z-index:6;
}

JavaScript

$(document).ready(function(){
     separar();  
    
});

function separar(){
     $('#roundYellow, #roundRed, #roundGreen').animate({    
            left:'40px'
     },{
         duration:200,
         complete: function(){
                  $('#roundYellow, #roundRed, #roundGreen').animate({    
                    left:'40px'
                  },{
                        complete: function(){
                          $('#roundYellow, #roundRed, #roundGreen').animate({    
                            left:'40px'
                          },200);  
                      }
             }
         }
};

function juntar(){
     $('#roundYellow').animate({    
            top:'40px'
        },200,function(){
            alert('dentro primera');
            $('#roundRed, #roundYellow').animate({
                left:'0px'
            },200,function(){
                
                 $('#roundGreen, #roundRed, #roundYellow').animate({
                top:'0px'
                 },150,function(){
                     
                     setTimeout(separar,200);
                 });
            });
           
      });
};