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

以下是仅使用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;
}

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/

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

您可以根据需要更改值。

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

3 个答案: