jquery - 从中心向外扩展元素，忽略 div 边界

Question

我怀疑这可能很容易回答，而且我显然遗漏了一些东西，但我现在有点不知所措。我有一个带有背景图像的 div。单击时，我有另一个 div(通过 border-radius 形状为圆形)，我想从第一个 div 的中心扩展，越过该 div 的边界，有效地将其擦成圆圈并变成一种颜色。让圆圈扩大是没有问题的，但是(大概是因为圆圈在初始 div 中居中的方式)我似乎无法让它扩大到超过左/上边界——一旦它碰到它们，它就会继续向右和底部展开。

这是简单的动画代码:

$(".projectContainer").click(function(){
  $(".circle").animate({
        width:'+=600px',
        height:'+=600px'},600);
});

HTML:

<div class="projectContainer" id="A Head In The Box">
    <div class="circleContCont"><div class="circleCont">
            <div class="circle"></div>
    </div></div>
</div>

以及各种元素的 CSS:

.projectContainer {
   width:384px;
   height:288px;
   max-width:100%;
   background-color:#FFF;
   background-position: center center;
   display:inline-block;
   margin:7px;
   overflow:hidden;
}
.circleContCont {
   display:table;
   height:100%;
   width:100%;
   vertical-align:middle;
}

.circleCont {
   overflow:hidden;
   display:table-cell;
   vertical-align:middle;
}

.circle {
   width:0px;
   height:0px;
   margin-left: auto; 
   margin-right: auto;
   background: #FFF;
   border-radius: 50%;
   z-index:2;
}

居中代码取自here ，因为我无法以任何其他方式让它工作。虽然这似乎有点困惑，但可能有更简单的方法。

编辑:在将圆圈的位置设置为绝对位置并设置顶部和左侧值 (-=300px) 的动画后，圆圈现在可以超出包含的 div。但是，我无法让它保持居中。 Here's显示它如何工作的视频，以及 here's展示它现在如何工作的视频。

Answer 1

绝对定位你的圆圈，然后使用下面的代码实现动画效果

$(".projectContainer").click(function(){
  $(".circle").animate({
      width:'+=600px',
      left:'-=300px',
      top: '-=300px',
      height:'+=600px'
   },600);
});

勾选这个，点击圆圈

$(".circle").click(function() {
  $(".circle").animate({
    'width': '+=600px',
    'left': '-=300px',
    'top': '-=300px',
    'height': '+=600px'
  }, 600);
});

.circle {
  height: 100px;
  width: 100px;
  background-color: black;
  position: absolute;
  left: 100px;
  top: 100px;
  border-radius: 1000px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle"></div>