Question

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

代码相当长，所以我不会在这里发布很多内容，堆栈溢出需要一些东西，所以这里我是如何做宽度动画的：

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

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

我有几个问题，第一个，动画不是光滑的，它是烦躁的，我听说过或有人说你可以使用相同的计时器用于排队动画的队列，但我无法找到（因为我认为百分比的微小差异可能会导致这种情况）。任何人都可以帮忙的想法？

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

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

我的第三个也是最后一个问题，左侧区域的动画，当它向后扩展时，并不会与第一个中心区域（actionList）的扩展同时发生，它一旦出现就会出现＃39尽管排队，但是结束了：假。

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 clean＆amp;良好的做法。

多个宽度同时动画，达100％

1 个答案: