多宽度动画同时播放，达到100%

Question

当用户关闭左侧面板时，我正在尝试调整两个元素的宽度以扩展到更宽的区域。 为此，我将左侧面板设置为向右：100%，并扩展第一个元素以占据更多区域，同时保持第二个元素具有固定宽度（这也是一个动画，因为现在整个 div 占用了更多空间，所以他的百分比需要改变才能占据相同的像素宽度）

代码比较长，这里就不多贴了

  $('#centerWeb').animate({
                "width": "81.33333333%"
        }, {
            duration: 1000,
            queue: false
        });

JSFiddle：http://jsfiddle.net/dpPG7/

我有几个问题，首先，动画不“流畅”，它很烦躁，我听说或有人说您可以使用相同的计时器队列来排队动画，但我找不到如何（因为我相信百分比的微小差异可能会导致这种情况）。 任何人都可以提供帮助的想法？

我的第二个问题是，有时，就像在 jsfiddle 示例中一样，其中一个中心元素会弹回一行。在我的完整网络中，当重新扩展左侧区域时会发生这种情况，但在 JSfiddle 示例中，当最小化左侧区域时会发生这种情况。

在 JSFiddle 中：单击时左侧区域将其移除并展开其余区域，单击时红色按钮将左侧区域向后扩展。

我的第三个也是最后一个问题，左侧区域的动画，当它向后扩展时，不会与第一个中心区域（actionList）的扩展同时发生，它一旦完成就会发生，尽管是队列：假。

Answer 1

正如我所评论的，我个人更喜欢this codepen example：

#rightContainer{
    -webkit-transition: all linear 300ms;
    .. /* browser compatibility & remaining styles */
}
#rightContainer.shrink {
  left:20%;
}

和

$("#btn").click(function(){
  $("#rightContainer").toggleClass("shrink");
});

这是 imo 干净且良好的做法。