JQuery ~ How to animate the width and height of a window from the center

Question

Box size - Width: 200 pixels, Height: 140 pixels. When using animation to resize a window, it is converted from the top left. How to change its conversion from the center.

Html

<div class="box"></div> 

CSS

 width:200px; height:140px; background-color:#0066CC; 

JQuery

 $('.box').mouseover(function() { $(this).animate({ width: "210px", height: "150px" }, 200 ); }); $('.box').mouseout(function() { $(this).animate({ width: "200px", height: "140px" }, 200 ); }); 

Answer 1

Here's an option using only CSS (note: CSS3 ): http://jsfiddle.net/g67cc/6/

 .box { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; width: 200px; height: 140px; background-color:#0066CC; position : absolute; left: 100px; top: 100px; } .box:hover { width: 220px; height: 160px; left: 90px; top: 90px; } 

Answer 2

I do not think that's possible. In addition, you can animate the filling of the window ...

 <style> .box { width:200px; height:140px; } </style> <div class="box"><div></div></div> ​<script> $('.box').mouseover(function() { $(this).animate({ 'padding' : 5 }, 200 ); }); $('.box').mouseout(function() { $(this).animate({ 'padding' : 0 }, 200 ); }); </script> 

Working example:

http://jsfiddle.net/WryxR/1/

Answer 3

so here I am with the solution .. Check out this script example

CSS

 .box{ width: 200px; height: 140px; background-color:#0066CC; position : absolute; left: 100px; top: 100px; } 

Jquery:

 $('.box').hover(function(){ $(this).animate({ 'width': '220px', 'height': '160px', 'left': '90px', 'top': '90px' },200); },function(){ $(this).animate({ 'width': '200px', 'height': '140px', 'left': '100px', 'top': '100px' },200); }); 

You can change the value as you wish.