Question

我想制作类似this.

的内容

容器在某一点滑出的位置。我想象的方式是2个div。 1个正面和1个背面。当两个div都出来时，整个容器仍然是集中的。

我不知道我怎么开始。可以从一些指南开始吗？

Answer 1

这是这样做的一种方式。请注意我使用的是CSS过渡属性，在9以下的IE和其他浏览器的旧版本中不支持。

$("button").click(function() {
  $(".container").toggleClass("opened");
});

div {
  width: 200px;
  height: 100px;
}

.container {
  position: absolute;
  margin-left: -100px;
  margin-top: -50px;
  left: 50%;
  top: 50%;
  transition: margin-left .2s linear;
}

.container.opened {
  margin-left: -200px;
}

.back {
  background: red;
  transition: margin-left .2s linear;
}

.container.opened .back {
  margin-left: 200px;
}

.front {
  background: green;
  margin-top: -100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="back"></div>
  <div class="front"></div>
</div>
<button type="button">Push me!</button>

另一种方法是使用jQuery Animate，而不是将类open添加到div.back：

$( ".back" ).animate({
    margin-left: 200px,
}, 200,
function() {
    // Animation complete.
});

2水平滑动分区Jquery

1 个答案: