jQuery~如何从中心动画框宽度和高度

Question

盒子大小是宽度:200px,高度:140px.使用动画更改框大小时,它将从左上角变换.如何改变它从中心转换.

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

我认为这是不可能的。或者，您可以为盒子的填充设置动画......

\n\n

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

\n\n

工作示例：

\n\n

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

\n