別のdivレイヤーの上にdivレイヤーをアニメーション化する方法

Question

私はこのsiteの効果を真似しようとしています。それらは2つの層、layer-topとlayer-baseを持っています。基本レイヤーは、topレイヤーの上に非常に良い方法でアニメートされます。私はソースを見てみましたが、それは本当に複雑です。

私はjsbinに同じ効果をやろうとしています：http://jsbin.com/izexu3/2

誰かが私を得ることで私を助けることができるが、このような効果を開始しますか？

しかし、jQueryのためにpageSlide pluginsがあることがわかりますが、私の望むものと同じ効果はありません。プラグインでは、左側のdivは別のdivの上にdivを移動するのではなく、右側に移動します。

Answer 1

は、ここでは非常に基本的な例です：http://jsfiddle.net/4mPbV/

HTML：

<div id="slide-pane"> 
    <button id="toggle-button">←</button> 
</div> 

jqueryの：

$("#toggle-button").data("open", false); 

$("#toggle-button").click(function() { 
    // slide to the right 
    if ($(this).data("open") == false) { 
     $("#slide-pane").animate({ 
      width: '+=400' 
     }, function(){ $("#toggle-button").text("→"); }); 
     $(this).data("open", true); 
    } 
    // slide to the left 
    else { 
     $("#slide-pane").animate({ 
      width: '-=400' 
     }, function(){ $("#toggle-button").text("←"); }); 
     $(this).data("open", false); 
    } 
}); 

CSS：あなたは、単に取得するために一つの層をアニメーション化することができます

#slide-pane { 
    position:absolute; 
    right: 0px; 
    top: 0px; 
    bottom: 0px; 
    width: 200px; 
    background-color: #33339F; 
} 

Answer 2

このe完璧です。ここ

例：http://jsbin.com/okaxa4