百分比宽度的滑动div

Question

我有2个div，70％和30％宽度，在包含div的100％宽度内。点击时，我希望70％的div变成100％的宽度，然后'滑过'30％的div，第二次点击回退到70％，并恢复30％的div。我已经在下面达到了预期效果的一半;它'滑过'较小的div但保留了70％的宽度。我无法将宽度扩展到100％而没有口吃动画，因为我在切换后调用宽度更改或将其展开至100％，但其他30％div仍然可见，并将div敲入2行。

http://jsfiddle.net/establish/scKf2/

我没有看到另一个类似的问题的作品，但它们是静态的宽度，我不能成功地将其转换为百分比，但再次突然出现了上述问题。

http://jsfiddle.net/establish/kjDYh/

HTML

<div id='ember'> 

<div id='sidebar'> 
</div> 

<div id='activity'> 
    <a href='#' id='trigger'>Nav</a> 
</div> 

</div> 

CSS

#sidebar { 
background-color: green; 
float: left; 
height: 200px; 
position: relative; 
z-index: 5; 
width: 30%; 
} 

#activity { 
background-color: purple; 
float: left; 
height: 200px; 
position: relative; 
z-index: 10; 
width: 70%; 
} 

a { 
color: white; 
display: block; 
padding: 12px; 
text-decoration: none; 
} 

JS - 第一次尝试

$('#trigger').click(function() { 

$('#sidebar').animate({width: 'toggle'}); 

});​ 

JS - 第二次尝试

$('#trigger').toggle(function() { 
    $('#sidebar').animate({width: '+=22em'}); 
    $('#activity').animate({width: '-=22em'}); 
},function() { 
    $('#sidebar').animate({width: '-=22em'}); 
    $('#activity').animate({width: '+=22em'}); 
});​ 

Answer 1

你可以做这样的事情？

http://jsfiddle.net/kjDYh/2/

基本上设置NAV为0px和主要为100％？

$('#trigger').toggle(function() { 
    $('#sidebar').animate({width: '100%'}); 
    $('#activity').animate({width: '0px'}); 
},function() { 
    $('#sidebar').animate({width: '70%'}); 
    $('#activity').animate({width: '30%'}); 
});​ 

Answer 2

为什么不设置宽度％在jQuery的电话吗？

$('#trigger').click(function() { 

    $('#sidebar').animate({width: '100%'}); 
    $('#activity').animate({width: '0px'}); 

});​ 

等

切换，新的按钮，单击后退。

http://jsfiddle.net/zWxUj/10/

Answer 3

$('#trigger').toggle(
    function() { 
     $('#activity').animate({width: '100%'}); 
     $('#sidebar').animate({width: '0%'}); 
    }, 
    function() { 
     $('#activity').animate({width: '70%'}); 
     $('#sidebar').animate({width: '30%'}); 
    }); 

工作的呢？

jsfiddle