CODEWITHSUNDEEP
javascriptjquery
TomD
TomD

Reputation: 181

Animate or scale from center

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.

Upvotes: 2

Views: 7669

Answers (2)

VIDesignz
VIDesignz

Reputation: 4783

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

});

Upvotes: 3

Belyash
Belyash

Reputation: 792

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.net/dmYY3/3/ ?

Upvotes: 2

Related Questions