Jquery 动画从右下角到

Question

我正在使用 jquery 和 css 开发 UI。我试图使用 jQuery animate 构建一个导航页面。我现在所拥有的是页面中的四个图 block 。我能够增加顶部两个图 block 的高度和宽度，使其占据整个父 div。但我无法对底部的两个 DIV 执行相同的操作。

我尝试了很多方法，但问题是我可以对顶部的两个 DIV 使用左浮动和右浮动，但不能对底部的两个 DIV 执行相同的操作。不知道底部用什么 两个 DIV。

我想要的是一种如图所示的动画，以便 Child3 和 Child4 从其位置展开，通过从其位置展开来占据父 DIV 的整个高度和宽度。

我现在正在做的是我正在使用

$("child1").animate({"height":someheight,"width":somewidth},500);

我根据div当前的高度增加和减少高度和宽度，以便它具有放大和缩小效果。

我已附上 JS Fiddle:http://jsfiddle.net/uxuzfq5x/对于顶部的两个 DIV，我想对底部的两个 DIV 实现上述内容。

我是 jQuery 的新手，如果我犯了任何错误，请纠正我。

提前致谢。

Answer 1

使用 jQuery 尝试类似的操作 animate() 方法

function f1() {
  $(".child3").css("z-index", 1000).animate({
    height: "100%",
    width: "100%"
  }, 1000).animate({
    width: "49.8%",
    height: "49%"
  }, 1000, function() {
    $(this).css("z-index", 100);
    f2();
  });
}

function f2() {
  $(".child4").css("z-index", 1000).animate({
    height: "100%",
    width: "100%"
  }, 1000).animate({
    width: "49.8%",
    height: "49%"
  }, 1000, function() {
    $(this).css("z-index", 100);
    f1();
  });
}
f1();

.parent {
  position: relative;
  width: 500px;
  height: 100px;
  margin: 0 auto;
  text-align: center;
  font-size: 0;
}
.child {
  position: absolute;
  width: 49.8%;
  height: 49%;
  background-color: green;
  font-size: 16px;
}
.child1 {
  left: 0;
  top: 0;
}
.child2 {
  right: 0;
  top: 0;
}
.child3 {
  left: 0;
  bottom: 0;
}
.child {
  right: 0;
  bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="parent">
  <div class="child child1">Child1</div>
  <div class="child child2">Child2</div>
  <div class="clear"></div>
  <div class="child child3">Child3</div>
  <div class="child child4">Child4</div>
</div>