Раздвижные разделители с процентными ширинами

Question

У меня есть 2 divs, 70% и 30% ширины, с шириной 100%, содержащей div. При щелчке я хочу, чтобы 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/

в основном установить СЧА в 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