問題在重新調整絕對定位的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({  

     }, {