パーセンテージ幅のスライディングディビジョン

Question

divを含む100％幅内に、2つのdiv、70％、および30％の幅があります。クリックすると70％のdivが100％の幅に変更され、30％のdivを 'スライドオーバー'し、2回目のクリックで70％に戻って30％のdivに戻ります。私は以下の希望の効果を半分達成しました。小さなdivにスライドしますが、幅は70％です。トグル後に幅の変更を呼び出した場合や100％に拡大しても、他の30％のdivがまだ表示されていて、2つの線にdivをノックしているので、ぼかしアニメーションを持たずに幅を100％に拡大することはできません。

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/

基本的0PXするNAVを設定し、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