HTML & JQuery：Silde page on top of other

Question

我想让一个页面滑动到另一个页面的顶部。当Page滑动时，背景中的另一个页面会淡出。比如在这个网站上。当你点击麦肯锡概览按钮时，可见的html条被添加到页面中，幻灯片和背景页面被禁用。而且它看起来像滑动的页面是预加载的。

我尝试了几个页面滑块jquery插件，但与上面提到的链接不一样。他们不会在后台禁用页面。而且当它们隐藏时，它们会隐藏整个页面。但我想要一些可见的部分，它提供给用户。请指引我。

Answer 1

"homeSlider"类可以在网站上查看(搜索MC.homeSlider)，它可以设置不透明度和右距。

在"#slider"one_answers"#slider"之间切换更容易。打开"，并使用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}

当然，缺点是旧的浏览器无法看到动画。它通过适当地显示打开和关闭状态来适当地降解。

jsbin: http://codepen.io/anon/pen/rhudB