javascript - 在 jquery 中显示从中间向外扩展的 div

Question

我想在用户生成触发器时显示我的 div。我想用来显示 div 的动画是这样的 div 从它的中心开始渲染，然后通过在两个方向(向上和向下)扩展来获得它的高度逐步地。这是我尝试过的片段。 div 从左边开始渲染。我想要的是它从其高度的中间开始渲染。

$("#km1").click(function() {
  $(".homePopup").animate({
    width: "730px",
    height: "200px"
  }, 800);
})

.homePopup {
  position: absolute;
  z-index: 100;
  width: 400px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" id="km1">Know more</a>
<div class="homePopup"></div>

Answer 1

您也可以为 margin 设置动画以实现此效果。

设置初始 margin-top 和 margin-bottom 最终 height 的一半；以及 margin-left 和 margin-right 最终 width 的一半。然后，当您增加 width 和 height 时，同时减少 margin。

$("#km1").click(function() {
  $(".homePopup").animate({
    width: "730px",
    height: "200px",
    margin: '0'
  }, 800);
})

.homePopup {
  position: absolute;
  z-index: 100;
  width: 0px;
  margin: 100px 365px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" id="km1">Know more</a>
<div class="homePopup"></div>