隐藏和显示右侧边栏[关闭]

Question

所以，我正在尝试创建一个 JavaScript 或查询来隐藏右侧边栏 div。事实证明比我预期的要困难得多，但我已经很接近了。

我创建了一个隐藏/显示右侧边栏，单击时滑出，然后再次单击按钮时滑回到全宽。

问题： 当点击“隐藏”时： 侧边栏滑出为“width:10px;”内容为 margin-right:10px; 当点击“显示”时： 侧边栏滑入“宽度：200px；”并将内容滑回 'margin-right:200px;

我创建了一个 JS Fiddle 来展示：

http://jsfiddle.net/6uVvF/

我正在尝试完成一个动画版的面子书右侧边栏。 这还有另一个例子：http://www.sidlee.com/

谢谢。

Answer 1

以下是较旧但仍在运行的 Javascript 和 JQuery 切换。

切换器隐藏侧边栏。

$('#toggle').toggle(function() {
    $('#right-sidebar').animate({
        width: "10px",
        backgroundColor: "#000000"
    }, 400);
}, function() {
    $('#right-sidebar').animate({
        width: "200px",
        backgroundColor: "#ffffff"
    }, 400);
});

在此处查看工作版本：

http://jsfiddle.net/glepage/6uVvF/