Question

我想将一个页面滑到另一个页面的顶部。页面幻灯片时，背景中的另一个页面淡出。就像在this网站上一样。当您单击麦肯锡概览按钮时，该可见的html条带将添加到幻灯片页面，并且后台页面将被禁用。此外，它看起来像预先加载幻灯片的页面。

我尝试了几个页面滑块jquery插件，但与上面提到的链接不一样。不要在后台禁用页面。当他们隐藏时，他们隐藏整个页面。但我希望用户能看到一些可见的部分。请指导我。

Answer 1

“homeSlider”类是available for review on the site（搜索MC.homeSlider）它动画不透明度和边距右。

imho更容易在“#slider”和“＃slider.open”之间切换类，并为动画使用css过渡。

完成此任务的代码如下所示：

// jquery

$("#sliderBtn").click(function(){
    $("#slider").toggleClass("open");
});

// css

#slider {position:absolute;opacity:0;margin-left:300px;transition: opacity 2s, margin-left 1s;}
#slider.open {opacity:1;margin-left:100px}

当然，失败的是旧版浏览器无法看到动画。通过适当地显示打开和关闭状态，它会正常降级。