2 个水平滑动 Div Jquery

Question

我想制作类似this.

的东西

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

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

Answer 1

这是一种方法。请注意，我使用的是 CSS transition 属性，在 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 而不是将 class open 添加到 div.back:

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

2 个水平滑动 Div Jquery

2 Sliding Divs horizontally Jquery

jquery

jquery-ui

slide