使用内联块元素的JQuery动画行为

Question

我正在使用JQuery来动画两个div，一个在另一个的顶部，在另一个div中。效果就像一个按钮，顶部和底部的一半向上和向下打开以显示一些内容。我们的想法是使用float:left

将这些“按钮”排成一行

单击按钮时，脚本会检查是否有其他按钮打开，如果是，则关闭该按钮并打开单击的按钮。

这很好，除了我想在容器div类上更改float:left到display:inline-block（以防止在调整浏览器大小时包装多个按钮）。问题是按钮的布局中断，因为JQuery动画似乎在动画时改变了按钮容器的垂直位置。

请参阅fiddle

Answer 1

.btn{
  display:inline-block;
  vertical-align:top;
  margin-left: 20px;
}

请参阅fiddle