Изменить размер divs на слайде

Question

Я бы хотел, чтобы .left div (ширина: 20%;), чтобы скользить в .right div (начальная ширина: 100%;) и иметь размер .right div для анимации по ширине: 80 %;

В принципе, скользят в div и имеют другой размер.

http://jsfiddle.net/LTUTR/

HTML

<div class="container"> 

<div class="left"> 
    <p>left</p> 
</div> 
<div class="right"> 
    <p>right content</p> 
    <p class="showLeft">[Show left div]</p> 
</div> 

CSS

html, body { 
    width:100%; 
    height: 100%; 
    margin: 0; 
} 

.container { 
    width: 100%; 
    height: 100%; 
    position: relative; 
    overflow: hidden; 
} 

.left, .right { 
    float: left; 
    height: 100%; 
} 

.left { 
    background: green; 
    width: 20%; 
    display: none; 
} 

.right { 
    background: red; 
    width: 100%; 
} 

.showLeft { 
    cursor: pointer; 
} 
​ 

JS

$('.showLeft').click(function(){ 
    $('.right').animate({width: '80%'},350);  
    $('.left').animate({width:'toggle'},350); 
}); 

Answer 1

К сожалению, width:'toggle' не существует ... На самом деле, он существует! Это in the specs:

В дополнение к числовым значениям, каждое свойство может принимать строки «шоу», «шкура», и «тумблер». Эти ярлыки позволяют настраивать скрытие и отображать анимации, учитывающие тип отображения элемента .

Я действительно не знаю, почему он здесь не работает. И show кажется багги (little flashy demo).

Во всяком случае, вы можете установить начальную ширину 0:

.left { 
    background: green; 
    width:0; 
    display: none; 
} 

И использовать эту отредактированную функцию:

$('.showLeft').click(function(){ 
     $('.right').animate({width: '80%'},350); 
     $('.left').css('display','block').animate({width:'20%'},350); 
}); 

Demo

Answer 2

Try:

$('.showLeft').toggle(function(){ 
    $('.right').animate({width: '80%'},350);  
    $('.left').animate({width:'toggle'},350); 
}, 
function(){ 
    $('.right').animate({width: '100%'},350);  
    $('.left').animate({width:'toggle'},350); 
}); 

Answer 3

Вот го e для плавного анимации взад и вперед. Мы просто глядя на ширину левой DIV, чтобы решить, как поступить codehttp://jsfiddle.net/marktoth/W7UwU/7/