Question

Any ideas on how to animate the width and height of a div from the top center?
Tried using effect(‘scale’) but this is based on a show/hide so snaps back after completion.

Then tried a normal animate:

$('.box').animate({'width':200px,'height':200px,margin-left:-100px});

This works, but as there is a line of .box, I want the others to react and push to one side.

Answer 1

Fine Tuned

FIDDLE

$('.day').hover(function() {

  if($(this).index()==0){
      $(this).animate({'width':400,'height':400}, 500);
  }else{            
      $(this).animate({'width':400,'height':400}, 500);
      $(this).parent().stop().animate({'margin-left':'-100'} , 500);  
  }          
}, function() {
   $(this).animate({'width':200,'height':200}, 500);
   $(this).parent().stop().animate({'margin-left':'0'}, 500);

});