jquery - 如何为另一个 div 图层顶部的 div 图层设置动画

Question

我正在尝试模仿这个site的效果。它们有两层layer-top 和layer-base。基础层以非常好的方式在top层之上进行动画处理。我尝试查看源代码，但它确实很复杂。

我正在尝试对 jsbin 执行相同的效果:http://jsbin.com/izexu3/2

有人可以帮助我开始制作这样的效果吗？

我看到有 pageSlide plugins然而对于 jQuery，它们并没有达到我想要的效果。在插件中，左侧的 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;
}