jQuery同时动画两个div

Question

我希望动画两个div，以便他们模拟侧边栏的滑入/滑出。

我有什么作品，但从你可以看到的不太好

jsFiddle

具体问题：

1. 当div为animate时，右边的div会在没有明显原因的情况下改变垂直尺寸
2. div以不同的速度制作动画
3. 动画不流畅

---

HTML：

<div id="container">
    <div id="main"></div>
    <div id="sideNavBar"></div>
</div><!-- #container -->
<input type="button" id="mybutt" value="Click Me" />

jQuery的：

var state=true;

$('#mybutt').click(function() {
    if (state) {
        $('#main').animate({width:'+=28.5%'},2000);
        $('#sideNavBar').animate({width:'-=31%'},2000);
    }else{
        $('#main').animate({width:'-=30%'},2000);
        $('#sideNavBar').animate({width:'+=28.3%'},2000);
    }

    state = (state)?false:true;
});

的CSS：

body{border:1px solid red;}
#container{height:500px;width:100%;}
#main{height:500px;width:70%;background:yellow;float:left;}
#sideNavBar{height:500px;width:30%;float:right;background:blue;}

Answer 1

计算宽度并使用px而不是百分比：

var sidebarWidth = $('#sideNavBar').width();

$('#mybutt').click(function() {
    if (state) {
        $('#main').animate({width:'+=' +sidebarWidth+'px'},2000);
        $('#sideNavBar').animate({width:'-=' + sidebarWidth + 'px'},2000);
    }else{ 
        $('#main').animate({width:'-='+sidebarWidth+'px'},2000);
        $('#sideNavBar').animate({width:'+=' + sidebarWidth+'px'},2000);
    }

    state = (state)?false:true;
});

看到这个小提琴：http://jsfiddle.net/aJA9b/1/