jQuery〜如何从中心中心动画框宽度高度答案

【问题标题】：jQuery ~ How to animate box width&height from center centerjQuery〜如何从中心中心动画框宽度高度
【发布时间】：2012-02-14 05:17:32
【问题描述】：

盒子的大小是宽度：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 );
});

【问题讨论】：

标签： jquery

【解决方案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;
}

【讨论】：

【解决方案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/

【讨论】：

【解决方案3】：

好吧，所以我有解决方案.. 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);
});

您可以根据需要更改值。

【讨论】：