Gleitbereiche mit prozentualen Breiten

Question

Ich habe 2 divs, 70% und 30% Breiten, innerhalb einer 100% Breite div. Bei Klick möchte ich das 70% div auf 100% width ändern und über das 30% div "rutschen" und beim zweiten Klick zurück auf 70% und das 30% div wiederherstellen. Ich habe unten den gewünschten Effekt halb erreicht; es "rutscht" über das kleinere div, behält aber seine Breite von 70% bei. Ich kann die Breite nicht auf 100% erweitern, ohne eine Stottern-Animation zu haben, da ich die Breitenänderung nach dem Umschalten aufgerufen habe oder sie auf 100% erweitert habe, aber die anderen 30% div immer noch sichtbar sind und die Divs auf 2 Zeilen klopfen .

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

habe ich eine ähnliche Frage sehen, das funktioniert, aber sie sind statisch Breiten und ich konnte sie in Prozentsätzen, ohne die oben genannten Probleme wieder auftauchende nicht erfolgreich konvertieren.

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 - Erster Versuch

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

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

});​ 

JS - Zweiter Versuch

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

Answer 1

Sie können so etwas tun?

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

gesetzt grundsätzlich die NAV 0px und Haupt bis 100%?

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

Answer 2

Warum nicht einfach die Breite% in Ihrem jquery Rufaufbau?

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

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

});​ 

etc

Toggle, mit neuem Knopf klicken zurück.

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%'}); 
    }); 

funktionierts?

jsfiddle