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

【问题标题】：Show div expanding out from middle out in jquery在jquery中显示从中间向外扩展的div
【发布时间】：2015-03-02 16:55:57
【问题描述】：

我想在用户生成触发器时显示我的div。我想使用的动画显示div 是这样的，div 从其中心开始渲染，然后通过逐渐在两个方向（向上和向下）扩展来获得其高度。这是我尝试过的sn-p。 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>

【问题讨论】：

标签： javascript jquery html css show-hide

【解决方案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>

【讨论】：

【解决方案2】：

您需要从一开始就将元素定位在中间。我将左侧绝对位置设置为 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：

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

【讨论】：

【解决方案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>

【讨论】：