Question

我试图创建一个包含8个div的页面，每个都有一个按钮。

布局基本上顶部有4个div，1-4个底部有4个div，5-8。这些中的每一个都会更深入到网站，有点像登陆页面。

我希望所有div在其中一个点击时滑出页面，在其下面显示所有页面（基于点击的任何一个页面，页面将淡入视图）

这是我到目前为止（我的问题是，我不知道如何调用动画面板的javascript ...）：

＆＃13;

$("#up1").click(function() {
  $(".blockBaseUp").animate({
    "top": "50px",
    'opacity': '1'
  }, "slow");
});

$("#down1").click(function() {
  $(".blockBaseUp").animate({
    "bottom": "-50px",
    'opacity': '0.3'
  }, "slow");
});

＆＃13;

div.container {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
}
div.blockBaseUp {
  width: 24.7%;
  height: 49.5%;
  background-color: lightblue;
  border: 1px solid orange;
  float: left;
}
div.blockBaseDown {
  width: 24.7%;
  height: 49.5%;
  background-color: lightblue;
  border: 1px solid orange;
  float: left;
}

＆＃13;

<div class="container">
  <div id="block1" class="blockBaseUp">
    test1
  </div>
  <div id="block2" class="blockBaseUp">
    test2
  </div>
  <div id="block3" class="blockBaseUp">
    test3
  </div>
  <div id="block4" class="blockBaseUp">
    test4
  </div>

  <br>

  <div id="block5" class="blockBaseDown">
    test5
  </div>
  <div id="block6" class="blockBaseDown">
    test6
  </div>
  <div id="block7" class="blockBaseDown">
    test7
  </div>
  <div id="block8" class="blockBaseDown">
    test8
  </div>
</div>

＆＃13;

（请查看完整页面，否则它无法正常工作......如果有人对此进行了修复，那将会非常棒。）

水平开放分区有问题

0 个答案: