jquery动画工作不正常

在这里检查我的代码 我想要的是， 如果单击左侧的绿色条，其宽度应切换为10%和20%。进行此操作时，右侧也应切换其宽度。在这里，左边的部分工作得很好，但是当我为“#content”运行animate函数时

它显示的是内容动画，而不是里面的div。

---

如果您看到JSFIDLE中的代码，您就会理解。

使用

绝对定位

而不是浮动，问题就解决了

---

编辑：

html,body{
    overflow: hidden;
}
#container{
    overflow: hidden;
}
#lower{
    width:100%;
    height:90%;
    position: absolute;
    top: 10%;
    left: 0;
    right: 0;
    display: table;
}
#nav{
    display: table-cell;
    height: 100%;
    width:20%;
}
#content{
    display: table-cell;
    width:80%;
    height:100%;
}

$("#nav").click(function(){
    if (isSmall) $(this).animate({ width:'20%' })
    else         $(this).animate({ width:'10%' })

    isSmall=!isSmall;
});

一个更好的选择是使用一个绝对定位的表，然后您可以只设置一个窗格的动画，而不是同时设置两个窗格的动画

CSS:

html,body{
    overflow: hidden;
}
#container{
    overflow: hidden;
}
#lower{
    width:100%;
    height:90%;
    position: absolute;
    top: 10%;
    left: 0;
    right: 0;
    display: table;
}
#nav{
    display: table-cell;
    height: 100%;
    width:20%;
}
#content{
    display: table-cell;
    width:80%;
    height:100%;
}

$("#nav").click(function(){
    if (isSmall) $(this).animate({ width:'20%' })
    else         $(this).animate({ width:'10%' })

    isSmall=!isSmall;
});

jQuery:

html,body{
    overflow: hidden;
}
#container{
    overflow: hidden;
}
#lower{
    width:100%;
    height:90%;
    position: absolute;
    top: 10%;
    left: 0;
    right: 0;
    display: table;
}
#nav{
    display: table-cell;
    height: 100%;
    width:20%;
}
#content{
    display: table-cell;
    width:80%;
    height:100%;
}

$("#nav").click(function(){
    if (isSmall) $(this).animate({ width:'20%' })
    else         $(this).animate({ width:'10%' })

    isSmall=!isSmall;
});

换成

$("#content").animate({ width: '90%'}, 100)

---

在你的小提琴中，右边的蓝条正在扩展。你期待什么样的行为？所有的div都完美地显示在你的小提琴上谢谢。。。这正是我想要的。谢谢！