创建推送动画

Question

我正在尝试创建一个推动动画，其中一个元素“推动”另一个元素。像这样的：

感谢this answer，我终于实现了它。但现在我有另一个问题。我希望 #slider、leftBox 和 rightBox 具有基于其内容的高度。我不想给它设置一个固定的高度。

如果我删除它们的高度，并且由于它们的高度将基于其内容，我无法将固定的margin-top 分配给#buttons，因此我还必须为#buttons 删除margin。现在我必须删除所有这些，#slider 被隐藏了。

另外，我不希望 #buttons 在 #wrapper 中，我希望它在其他地方自己的 div 位置。

我怎样才能制作像上面的 GIF 这样的推送动画，高度是动态的？

JSFiddle

$(document).ready(function() {
  "use strict";

  $('#leftBtn').click(function() {
    $('#slider').animate({
      left: '-400px'
    });
  });

  $('#rightBtn').click(function() {
    $('#slider').animate({
      left: '0px'
    });
  });
});

#wrapper {
  width: 400px;
  background-color: chocolate;
  margin: auto;
  overflow: hidden;
  position: relative;
}
#leftBox,
#rightBox {
  width: 400px;
  display: inline-block;
  position: absolute;
}
#rightBox {
  left: 400px;
}
#slider {
  position: absolute;
  width: 800px;
}
#buttons {
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="slider">
    <div id="leftBox" style="background-color: cornflowerblue;">Hello
    </div>
    <div id="rightBox" style="background-color: darkkhaki;">Bye Bye
      <br/>See you
    </div>
  </div>


</div>

<div id="buttons">
  <div id="leftBtn" style="background-color: yellowgreen;">Click Me
  </div>
  <div id="rightBtn" style="background-color: yellow;">No, Click Me!</div>
</div>

Answer 1

我很确定我设法得到了你想要的。 我为您准备了两个 JSFiddle，第一个受到所有（体面的）浏览器的支持，而第二个可能更适合您想要的更好，但仅在 Internet Explorer 之外的所有浏览器中都受支持。

第一个： http://jsfiddle.net/Ljmxe5cx/

#leftBox,
#rightBox {
  width: 400px;
  float: left;
}

#slider {
  width: 800px;
}

盒子在高度方面没有完全填满容器，但正如我所说，这应该有更宽的支撑。

第二个：http://jsfiddle.net/hr8nzde8/

#leftBox,
#rightBox {
  width: 400px;
}

#slider {
  width: 800px;
  display:flex;
}

在这个版本中，盒子确实完全填满了容器，如果您决定为盒子本身更改一些 CSS，这通常也会减少麻烦