具有百分比宽度的滑动 div

Question

在包含 div 的 100% 宽度内，我有 2 个 div，70% 和 30% 宽度。单击时，我希望 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，main设置为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