问题在重新调整绝对定位的div使用jQuery

Question

能否请您看看This Demo，让我知道为什么这种奇怪的行为发生时，我想使用jQuery来调整.outer格，正如你可以在演示和下面的图片查看在开始调整大小之前，.outer div会堵塞一次。

我一定要使用绝对定位的div .inner的.outer DIV中为：

<div class="outer"> 
    <div class="inner" id="circle"></div> 
</div> 
<button id="plus" type="button" class="btn">Resize</button> 

$(function() { 
    $("#plus").on("click", function() { 
     $(".outer").animate({ 
      width: '+=20px', 
      height: '+=20px', 
      borderRadius: '+=10px' 
     }, { 
      duration: 500, 
      queue: false 
     }); 
     $(".outer").animate({ 
      left: '-=1%', 
      top: '-=1%' 
     }, { 
      duration: 500, 
      queue: false 
     }); 
    }); 
}); 

和这里的CSS规则：

#circle { 
    width: 100%; 
    height: 100%; 
    background: #fc2e5a; 
    -moz-border-radius: 120px; 
    -webkit-border-radius: 120px; 
    border-radius: 120px; 
    left:50%; 
    top:50%; 
    margin:-100px 0 0 -150px; 
} 
.inner { 
    position: absolute; 
} 
.outer { 
    position:relative; 
    width: 235px; 
    height: 220px; 
    left:50%; 
    top:50%; 
} 

您能否让我知道如何解决这个问题？感谢

Answer 1

您正在使用相同的height和width两个.outer和.inner股利。

#circle { 
    width: 100%; 
    height: 100%; 
} 

所以你不需要使用left，top和margin上#circle对准该div正常。

#circle { 
    width: 100%; 
    height: 100%; 
    background: #fc2e5a; 
    -moz-border-radius: 120px; 
    -webkit-border-radius: 120px; 
    border-radius: 120px; 
/* left:50%; 
    top:50%; 
    margin:-100px 0 0 -150px; */ 
} 

DEMO

Answer 2

删除以下三行的CSS：

left:50%; 
top:50%; 
margin:-100px 0 0 -150px; 

演示：http://jsfiddle.net/rLpc90sk/2/

Answer 3

有一两件事是需要从功能去除，以固定的行为被圈被压缩或 -

刚刚从#circle删除这些属性在点击后尺寸增加之前缩小。从该函数的第二个动画条目中移除左侧：' - = 1％'和顶部：' - = 1％'。随着上面的第一个建议，瞧，这个圆圈扩展没有收缩的左侧和底部动画。

$(".outer").animate({  

     }, {