使用jquery animate在侧栏展开时自动调整div的大小

我正在努力实现这个网站使用的效果。jquery工作正常，我现在的问题是当左侧面板/边栏展开时如何自动调整主要内容的大小。请帮帮我。提前感谢您。

来自QVIVO的利亚姆。我已经编写了一个快速的jsFiddle（）来模拟站点的框架

我的主要建议是尽量让浏览器为您完成大部分工作。我们没有使用JQuery设置DOM动画，而是简单地使用CSS转换添加和删除类标记。最初您不会看到好处，但当您开始用复杂的DOM树填充右侧面板时，您会发现平滑设置动画的唯一方法是通过硬件加速的过渡

关于自动调整主内容大小的问题，很简单——不要为包含的div声明宽度值，因为它们会自动延伸到页面的宽度。这些div中的内容可以被赋予100%的宽度值

干杯，

---

利亚姆

我不是Jquery的高手，所以我把它和JavaScript混合了一点

你将需要玩你想要的宽度%和外观

从你的CSS，首先我把类pannel_按钮，我把它绝对。我还移除了左侧的浮动

.panel_button{
    height: 50px;
    width: 50px;
    cursor: pointer;
    background-image: url(images/arrow.png);
    background-position: center center;
    background-repeat: no-repeat;
    border: thin solid #CCC;
    margin-left: -1px;
    top: 200px;
    position:absolute;
}

然后，对于您的Jquery和我的一些JavaScript，由于我在JS方面做得更好，我用这种方式制作了动画

var content = document.getElementsByClassName("content");
$('.panel_button').click(function()
{
    $(".panel").animate({width:'toggle'},500); 

    if( content[0].style.width=="70%" ){ 
        $(".content").animate({width:"90%"},500);
           $(".panel_button").animate({left:"0%"},500); 
    }
    else{  $(".content").animate({width:"70%"},500);
           $(".panel_button").animate({left:"29%"},500); 
          }
});

---

但就像我说的，你们需要调整宽度和位置，才能使你们的按钮达到你们真正想要的位置。另外，删除悬停时留下的浮动。

在我的例子中，我只使用%并显示：无。以及制作一个好的HTML框架。因为没有代码，我不能说更多。右侧是响应的，左侧是固定的。研究响应性设计。这是非常棒的代码，非常感谢。