如何让这个形状上下动画？

Question

我试图让这个形状代表车库门的开启和关闭。 一旦我有形状和指导，我可以使其他CSS（宽度，高度等）适合到位

非常感谢

Answer 1

使用类似的东西：

$(document).ready(function(){
    var closed = false;
    $("#openclose").click(function(){
        if (closed)
            $("#garage").animate({"height": 214, "width": 367}, 1000);
        else
            $("#garage").animate({"height": 10, "width": 367}, 1000);
        closed = !closed;
    });
});

小提琴：http://jsfiddle.net/praveenscience/q2534/2/

Answer 2

您可以使用border

执行此操作

Here is the demo

HTML

<div class="outerWrap">
  <div class="door"></div> 
  <div class="doorLayer"></div> 
</div>

CSS

.outerWrap {
  position: relative;
}
.door {
  width: 0;
  height: 0;
  border-top: 500px solid #000;
  border-right: 900px solid transparent;
   position: absolute;
  top:0;
  left: 0;
}
.doorLayer {
  width: 0;
  height: 0;
  border-top: 490px solid #ccc;
  border-right: 890px solid transparent;
   position: absolute;
  top:0;
  left: 5px;
}