jquery - スライドの div のサイズを変更する

Question

.left div (幅:20%;) を .right div (初期幅:100%;) にスライドさせ、アニメーションで .right div のサイズを width: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>

</p>

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

前後にスムーズにアニメーション化するコードは次のとおりです。http://jsfiddle.net/marktoth/W7UwU/7/を続行する方法を決定するために、左側の div の幅を確認しているだけです。 code

Answer 2

残念ながら、width:'toggle'存在しません...実際に存在します! それは仕様にあります：

数値に加えて、各プロパティは文字列 'show'、'hide'、および 'toggle' を取ることができます。これらのショートカットにより、要素の表示タイプを考慮したカスタムの非表示および表示アニメーションが可能になります。

なぜここで機能しないのか、私には本当にわかりません。そしてshowバグがあるようです（少し派手なデモ）。

とにかく、初期幅を 0 に設定できます。

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

そして、この編集された関数を使用します：

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

デモ

Answer 3

試す：

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