Jquery 滑出侧面板，然后调整页面其余部分的大小以填充

Question

我正在考虑创建一个以主区域和侧栏开头的页面，例如：

------------------------------
|           |                |
| side area |    main area   |
| 20% width |    80% width   |
|           |                |
------------------------------

并且可以隐藏或显示侧栏，以显示有或没有侧栏的页面。

但是...

移动侧栏后，我需要调整页面的其余部分以填充。

------------------------------
|                            |
|        main area           |
|        100% width          |
|                            |
------------------------------

并且侧栏可以切换到 show/hide，主区域总是调整大小以适合。

现在，我知道网上有很多这样的例子，但 none 似乎符合我的要求，并在我需要的时候让它正常工作。

所有示例似乎有两个主要方面：

1) 他们使用我不想使用的 JQueryUI。我已经在页面上加载了 JQuery，如果可能的话，我更愿意坚持使用 JQuery，而不加载其他插件

2) 他们滑动 in/out 侧栏而不影响页面的其余部分 - 滑出 div 似乎总是滑动 in/out 在其余部分的顶部页面，或将页面的其余部分推开

我看到的大多数其他示例都使用了绝对定位的侧栏，它只是滑入或滑出固定页面的其余部分。

我认为也许最好的方法是在单击按钮时制作两个动画运行 - 一个将侧栏宽度从 20% 设置为动画，另一个设置为主列宽度从 80% 到 100%，但这看起来有点乱。

Answer 1

您正在寻找这样的东西吗？ http://jsfiddle.net/j3ptnff2/

$('body').on('click', function () {
    $('.side').animate({
        'width': '0'
    }, 1000, function () {
        $('.main').animate({
            'width': '100%'
        });
    });
});

Answer 2

我通过使用 CSS table-cells 得到了最好的效果。

以这种方式制作页面，我设法制作了一个两栏的页面布局，然后将左侧栏的宽度动画化为 0，这允许右侧栏的宽度自动扩展到全宽.

这在实践中和跨浏览器上都非常有效。

Jquery 滑出侧面板，然后调整页面其余部分的大小以填充

Jquery slide out side panel, but then resize rest of page to fill

html

javascript

jquery