Question

我试图实现本网站http://www.qvivo.com/中使用的效果。 jquery运行正常，我的问题是如何在左侧面板/侧边栏扩展时自动调整主要内容。请帮帮我们提前谢谢你。

Answer 1

来自QVIVO的Liam来自这里。我写了一个快速的jsFiddle（http://jsfiddle.net/fZy6z/）来模仿网站的框架。

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

关于自动调整主要内容的问题，它非常简单 - 永远不会为包含div的声明宽度值，因为它们会自动拉伸到页面的宽度。然后，这些div中的内容的宽度值可以为100％。

干杯，利安

Answer 2

我不是Jquery最好的，所以我把它与JavaScript混合了一点。

你需要玩你想要的宽度％和外观。

从你的CSS，首先我把类pannel_button我把它放在了Absoute。我也删除左边的浮动

.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); 
          }
});

但就像我说的那样，你需要玩Width和positon来使你的按钮真正成为你想要的地方。另外，移除悬停的左侧浮动。

使用jquery animate扩展侧栏时自动调整div

2 个答案: