隐藏补充工具栏时将内容的宽度设置为100％？

Question

事先，原谅我的英语不好。

好的，这是我的实时网站：http://bleachindonesia.com/forum/

如果您注意到左侧的小X，则显示/隐藏侧边栏是一个切换。 jQuery工作正常。唯一的问题是，当我隐藏侧边栏时，内容的宽度不会变宽（达到100％）/不会填充空白区域（隐藏时侧边栏留空空格）。

隐藏侧边栏时我需要内容的宽度为100％，但保留其平滑动画。也许就像vBulletin forum中的那个。

这是jQuery btw：

//<!--
if($.cookie("sidebarpost") == undefined) {
    $.cookie("sidebarpost", "expanded");
}
var state = $.cookie("sidebarpost");
if(state == "collapsed") {
    $('.lside').hide();
            $('.lclose').hide();
            $('.lopen').show();
}

if($.cookie("sidebarpost") == "expanded") {
    $("#left-side").toggle(function(){
      $.cookie("sidebarpost", "collapsed");
      $('.lopen,.lclose').toggle();
      $('.lside').fadeOut().delay(1000);
      $('#content').hide("slide", { direction: "left" }, 2000);
    },function(){
      $.cookie("sidebarpost", "expanded");
      $('.lopen,.lclose').toggle();
      $('#content').show("slide", { direction: "right" }, 2000).delay(1000);
      $('.lside').fadeIn();
    });
} else {
    $("#left-side").toggle(function(){
      $.cookie("sidebarpost", "expanded");
      $('.lopen,.lclose').toggle();
      $('#content').show("slide", { direction: "right" }, 2000).delay(1000);
      $('.lside').fadeIn();
    },function(){
      $.cookie("sidebarpost", "collapsed");
      $('.lopen,.lclose').toggle();
      $('.lside').fadeOut().delay(1000);
      $('#content').hide("slide", { direction: "left" }, 2000);
    });
}
//-->

我知道它有点臃肿，也许如果有办法将它最小化，那将非常有帮助。有人可以帮忙吗？

Answer 1

在示例中，您给出的是右边距：内容区域为290px，侧边栏宽度为270px，隐藏时边缘为右边：0px;和宽度为0px;

使用jquery animate为内容的边距右侧和侧边栏的宽度设置动画

Answer 2

您可以调整content宽度作为切换功能的一部分。类似的东西：

$('.lside').fadeOut(400, function(){$('#content').width("98%")});

$('.lside').fadeIn(400, function(){$('#content').width("76%")});