swap animation

by Ravindra Athreya

HTML

<div id="container">
    <div id="swapa" class="tile"></div>
    <div id="swapb" class="tile"></div>
</div>

CSS

body{
    margin:0;
}

.tile{
    position:absolute;
    display: inline-block;
    width:15px;
    height:15px;
    background-color: #ccc;
    border1: 0px solid #ccc;
}

#swapa{
    
    z-index:2;
}

#swapb{
    left: 25px;
}

JavaScript

var swapboxes = function(){
    $("#swapa").animate({"border-width": 1},{queue:false}).delay(1000).animate({left: 25}).animate({"border-width":0}).delay(2000).animate({left:0},function(){
        var t = setTimeout(swapboxes, 1000);
    });
    $("#swapb").delay(1000).animate({left:0}).delay(1000).animate({"border-width":1}).delay(1000).animate({left:25}).animate({"border-width":0});
}
swapboxes();