Question

我试图模仿这个site的效果。它们有两层layer-top和layer-base。基础层以非常好的方式在top图层的顶部进行动画制作。我试着查看源代码，但它确实非常复杂。

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

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

我看到jQuery有pageSlide plugins但是，它们没有我想要的效果。在插件中，左侧的div进一步向右移动，而不是将div滑到另一个的顶部。

Answer 1

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

您可以简单地为一个图层设置动画以获得此效果。

此处示例：http://jsbin.com/okaxa4

如何在另一个div图层的顶部设置div图层的动画

2 个答案: