javascript - 多个宽度同时动画，达到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");
});

我认为这是清洁和良好的做法。