Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

****** ****** UPDATE

这是从窗口高度中间运行动画的css：

.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的{{1}}和margin-right一半。然后，当您增加width和width时，也会减少height。

＆＃13;

margin

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

$("#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>

显示div在jquery中从中间扩展出来

3 个答案: