jQuery Animate onClick

HTML

<div id="block1" class="sub"></div>
<div id="block2" class="sub"></div>

CSS

div{
  width:50px;
  height:50px;
  position: absolute; 
  transition: 0.3s all ease-in;
}

#block1 { 
background: blue;
}

#block2 { 
background: green;
 top:50px;
}

#block3 { 
background: red;
 top:100px;
}



.sub{
  top:0px;
  left:0px;
  
}
.main{
  top:75px;
  left:100px;
 height:200px;
 width:200px;
}

JavaScript

$("#block1").click(function(){
  $("#block1").addClass('main')
  $("#block2").removeClass('main');
  $("#block3").removeClass('main');
});

$("#block2").click(function(){
  $("#block2").addClass('main')
  $("#block1").removeClass('main');
  $("#block3").removeClass('main');
});

$("#block3").click(function(){
   $("#block3").addClass('main')
  $("#block1").removeClass('main');
  $("#block2").removeClass('main');
});