在 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

您需要从一开始就将元素定位在中间。我将左侧绝对位置设置为 50%，然后将元素向后移动 -50%，使其位于中间。

查看CSS 转换：

http://css-tricks.com/almanac/properties/t/transform/

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

.homePopup {
  position: absolute;
  z-index: 100;
  width: 0;
  background-color: red;
  left: 50%;
  transform: translateX(-50%);
  
}

<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>

******更新******

这里是 css 到运行从 window 高度中间开始的动画：

.homePopup {
  position: absolute;
  z-index: 100;
  width: 0;
  background-color: red;
  top: 50%;
  transform: translateY(-50%);
}

Answer 2

您也可以为 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>

Answer 3

我将宽度和高度除以四，并将其添加到左侧和顶部以获得请求的中心动画。

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

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

<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>

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

Show div expanding out from middle out in jquery

html

javascript

css

jquery

show-hide