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 pletion.

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.

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 pletion.

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.

• javascript
• jquery

• Its about how this element sits in the page. This isn't flash. – George Commented Nov 14, 2012 at 12:10
• Use j Query on the others to make it look like it's reacted? – Luke Turnbull Commented Nov 14, 2012 at 12:12
• 1 Can we see a fiddle? With the HTML and other stuff? – Praveen Kumar Purushothaman Commented Nov 14, 2012 at 12:12
• Yep fiddle here: jsfiddle/dmYY3 – TomD Commented Nov 14, 2012 at 12:25
• I've tried adding 'margin-left:-100' on the prev child to pensate but it doesn't seem to solve the issue. (on jsfiddle) – TomD Commented Nov 14, 2012 at 12:57

2 Answers 2

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);

});

Maybe like this:

$('.day').hover(function() {
    $(this).animate({'width':400,'height':400, 'margin':'-100px -90px'});        
}, function() {
    $(this).animate({'width':200,'height':200, 'margin': '0 10px'});      
});

Fiddle: http://jsfiddle/dmYY3/3/ ?