javascript - HTML/CSS 动画 - JavaScript

Question

我一直在尝试制作一扇通过点击按钮触发的滑动门。

Here is my fiddle

我有滑动门的两侧。左边是蓝色，右边是红色。左侧应向左滑动，右侧门应向右滑动。

首先，我尝试将按钮放在门的中间。我正在使用

#button {
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
}

但按钮还是有点偏斜

但其次当点击按钮时，两侧的门应该同时滑出，但不幸的是只有红色的门可以正常工作。

蓝色的门被卡住了。我做错了什么？

Answer 1

您可以使用简单的JQuery 动画 来执行您需要的操作。

FIDDLE

代码如下:

$("button").click(function() {
  $(".one").animate({
    left: '0'
  });
  $(".three").animate({
    left: '200px'
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one" style="background:#98bf21;height:100px;width:100px;position:absolute;left:100px;"></div>
<div class="two" style="background:blue;height:100px;width:100px;position:absolute;left:100px;">

</div>
<div class="three" style="background:red;height:100px;width:100px;position:absolute;left:100px;"></div>
<button style="position:absolute;left:110px;top:50px;">
  CLICK ME
</button>