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

问题描述 投票:0回答:1

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

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

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

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

http://jsfiddle.net/6uVvF/

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

谢谢。

javascript jquery jquery-animate sidebar
1个回答
0
投票

以下是较旧但仍在运行的 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/

© www.soinside.com 2019 - 2024. All rights reserved.