Javascript 创建推送动画

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

多亏了你，我终于实现了。但现在我有另一个问题。我希望

#slider

、

leftBox

和

rightBox

具有基于其内容的高度。我不想给它设定一个固定的高度

如果我删除了它们的高度，并且因为它们的高度将基于其内容，我无法将固定的

边距顶部

分配给

#按钮

，因此我还必须删除

#按钮

的

边距

。现在，我必须删除所有这些内容，

#滑块

被隐藏

另外，我不想在

#wrapper

中使用

#按钮

，我希望它位于它自己的

div

位置

我怎样才能有一个像上面的GIF一样的推送动画，高度是动态的

$（文档）.ready（函数（）{
“严格使用”；
$（'#leftBtn'）。单击（函数（）{
$（“#滑块”）。设置动画({
左：'-400px'
});
});
$（'#rightbn'）。单击（函数（）{
$（“#滑块”）。设置动画({
左：“0px”
});
});
});
#包装器{
宽度：400px；
背景颜色：巧克力色；
保证金：自动；
溢出：隐藏；
位置：相对位置；
}
#左框，
#右盒{
宽度：400px；
显示：内联块；
位置：绝对位置；
}
#右盒{
左：400px；
}
#滑块{
位置：绝对位置；
宽度：800px；
}
#钮扣{
宽度：100px；
}

你好
再见

再见
点击我
不，点击我！
我很确定我设法得到了你想要的东西。
我为您准备了两个jsfiddle，第一个由所有（体面的）浏览器支持，而第二个可能更适合您想要的，但仅在除internetexplorer之外的所有浏览器中支持

第一个：

箱子不能完全装满容器，但正如我所说，这应该有更广泛的支持

第二条：

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

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

#slider {
  width: 800px;
}

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

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