jQuery弹出/叠加效果

Question

我真的希望有人可以帮助我解决这个项目要求，因为我是JS的新手，或者说不是先进的，我今天只能破解这个，不知道如何。

下面是一个影像需要的图像，从上到下开始，你看它是如何扩展但在顶部和底部弯曲直到完全打开。

任何人对我如何做到这一点都有任何想法是JS / jQuery（非基于插件）如果有人可以帮我解决这个问题，我将永远感到很有兴趣。

非常感谢

Answer 1

你可以使用CSS3 border-radius在没有Javascript / jQuery的情况下做到这一点。但是，如果您需要通过现有的JS代码启动它，那么只需将样式包装在一个类中，并将该类应用于JS代码中的某个事件。

请记住，为了获得您在问题中的椭圆效果，块必须是矩形而不是方形，否则您将以圆形结束。

一个简单的示例摘录：

div {
    margin: 16px;
    height: 10px; width: 240px;
    background-color: red;
    border-radius: 50%;
    opacity: 0;
    transition: all 2s ease-in;
}
a:focus ~ div {
    height: 120px; width: 240px;   
    border-radius: 0px;
    opacity: 1;
}

<a href="#">Click</a>
<div></div>

使用jQuery触发效果的片段：

$("#btn").on("click", function() {
    $("#d1").addClass("effect");
});

div {
    margin: 16px;
    height: 10px; width: 240px;
    background-color: red;
    border-radius: 50%;
    opacity: 0;
    transition: all 2s ease-in;
}
div.effect {
    height: 120px; width: 240px;   
    border-radius: 0px;
    opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="btn" href="#">Click</a>
<div id="d1"></div>

Answer 2

你可以试试这个。

dabblet

上的演示

body {
  background-color: black;
  margin: 0 auto;
  overflow: hidden;
}
#overlay {
  border-top-left-radius: 1000px 100px;
  border-top-right-radius: 1000px 100px;
  border-bottom-left-radius: 1000px 100px;
  border-bottom-right-radius: 1000px 100px;
  width: 100%;
  height: 100px;
  background-color: white;
  margin: 0;
  position: absolute;
  top: calc(50% - 50px);
  -webkit-animation: anim 4s infinite;
  animation: anim 4s infinite;
  height: 800px;
  top: calc(50% - 400px);
}
@-webkit-keyframes anim {
  0% {
    height: 1px;
    top: calc(50% - 0.5px);
  }
  100% {
    height: 800px;
    top: calc(50% - 400px);
  }
}
@-moz-keyframes anim {
  0% {
    height: 1px;
    top: calc(50% - 0.5px);
  }
  100% {
    height: 800px;
    top: calc(50% - 400px);
  }
}

<div id="overlay"></div>