moving divs

by Chandana Thota

HTML

<!-- Moving divs -->
<div id="box">
</div>
<div id="box1">
</div>

CSS

#box{
    position:absolute;
    width:50px;
    height:50px;
    background-color:red;
    left:-100px;
    
}
#box1{
    position:absolute;
    width:50px;
    height:50px;
    background-color:green;
    
}

JavaScript

var pos = $('#box').position().left;
function loop() {
 //moving first div from left to right 
$('#box').css({left:0}); 
    $( "#box" ).animate({ "left": "+=500" }, 7000 , 'linear',
                        function() {loop();
        })
 //moving second div from left to right
    $('#box1').css({left:"100px"});  
    
    $( "#box1" ).animate({ "left": "+=500px" }, 5000 , 'linear',
                        function() {loop();
        })
}
    loop();