Question

我想从顶部（导航栏下方）到页面底部制作一个幕后动画，推动用户所在的任何页面顶部，但它应该在500毫秒内以灰色背景开始。页面结构如下：

<body>
    <div id="viewport">
        content here
    </div>
</body>

我正在使用它：

$("#viewport").hide("blind", { direction: "down" }, 500, function (){
    // render target page
});

问题是如何使用灰色背景制作效果，这在当前的背景下是不同的。还有另一种方法可以实现吗？感谢

Answer 1

编辑，我发错了代码......这样的东西？显然，将要加载的页面更改为相关的页面。

＆＃13;

$(document).ready(function(){
		
$("#changer").on("click", function(){
	
 $( "#curtain" ).animate({ height:"+=95%"  }, 4000,
function()   {   	$("#viewport").load("PageYouWantToLoad.html",function(){
              $( "#curtain" ).animate({ height:"-=1px" });                          
          });           
      });
 });
});

＆＃13;

header{z-index:50;height:50px;background-color:grey;margin-bottom:30px;}
#curtain{background-color:grey;height:1px;min-width:100%;
z-index:3;position:absolute;top:52px;}
#newDiv{display:none;}

＆＃13;

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
 </script>
<header><h3>header here <button id ="changer" >Click to change</button></h3></header>
<div id="curtain"> 
</div>
<div id="viewport">
Original page here  Original page here  Original page here  Original page here  
 </div>

＆＃13;

编辑，我发布了错误的代码。哎呀....

Answer 2

您还可以使用与CSS3一起使用的 jQuery插件 pagePiling.js来创建流畅的移动，但是可以使用旧浏览器的jQuery。

非常好。

Jquery Curtain down效果

2 个答案:

编辑，我发布了错误的代码。哎呀....