jQuery ~ 如何从中心点动画盒子的宽度和高度

Question

盒子大小为宽度：200px，高度：140px。 使用animate来改变盒子大小时，它会从左上角进行变换。 如何使它从中心点进行变换。

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

- user964351

Answer 1

这里有一个只使用CSS（注意：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;
}

- rkw

Answer 2

我认为这是不可能的。或者，您可以通过动画方式来调整盒子的填充...

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

工作示例：

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

- Alex

Answer 3

好的，我来提供解决方案了... 查看这个示例

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

您可以根据需要更改该值。

- dku.rajkumar