jquery - jquery 动画无法正常工作

Question

在这里查看我的代码 http://jsfiddle.net/metalshan/eHG6X/ 我想要的是，如果我点击左侧的绿色条，它的宽度应该切换到 10% 和 20%。这样做时，右侧也应该切换其宽度。在这里，左边部分工作得很好，但是当我为“#content”运行动画函数时，

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

它显示的是#content 动画，而不是其中的 div。如果您在 jsFiddle 中看到代码，您就会明白。

Answer 1

使用absolute positioning而不是浮动，问题就解决了。

jsFiddle 演示

#container{
    overflow: hidden;
}    
#lower{
    position: relative;
}
#nav{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}
#content{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
}

---

编辑：

一个更好的选择是使用absolutely positioned table, 然后您可以只为一个窗格而不是两个窗格设置动画。

jsFiddle 演示

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%;
}

jQuery：

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

    isSmall=!isSmall;
});

Answer 2

将其更改为

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