2个水平滑动Divs Jquery

Question

我想做类似this.的东西

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

我什至不知道如何开始。可以得到一些指南开始吗？

Answer 1

这是执行此操作的一种方法。请注意，我使用的是 CSS 过渡属性，IE 9 及以下版本的其他浏览器不支持该属性。

$("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.
});