jQuery ~ How to animate box width&height from center center

Question

The box size is width:200px,height:140px. When use animate to change box size,it will transform from left top. How to change it transform from center 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 just 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 don't think that is possible. Alternatively, you could animate the padding of the box...

<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

well so here i am with solution.. Check This fiddle 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.