Jquery动画从右下角到

Question

我正在使用jquery和css在UI上工作。我试图使用jQuery animate为导航构建一个页面。我现在拥有的是页面中的四个图块。我能够增加顶部两个瓦片的高度和宽度，以便它占据整个父div。但我无法对底部的两个DIV做同样的事情。

我尝试了很多东西，但问题是我可以使用左浮动并向右浮动前两个DIV但我不能对底部的两个DIV做同样的事情。我不知道底部会用什么 两个DIV。

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

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

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

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

我已经为前两个DIV添加了JS Fiddle：http://jsfiddle.net/uxuzfq5x/，我想为底部的两个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>

Answer 2

试试这个jsfiddle

   $(function(){

     $(".child").animate({"height":"100px","width":"200px"},500);

    });