jquery动画无法正常工作

Question

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

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

它显示了#content动画，而不是里面的div。 如果您看到jsFiddle中的代码，您将理解。

Answer 1

使用absolute positioning代替浮动，问题就解决了。

jsFiddle Demo

#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 Demo

<强> 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)