从减去顶部值的幻灯片

Question

我是jquery的初学者。当我点击一个按钮时，我想做一个简单的淡入淡出，但从屏幕上方，例如，减去最高值。但是我得到的仅仅是在页面中滑动，而不是从上面滑动。并且它只在我加载html时有效。之后，不透明度是唯一的工作。这里的示例代码：

#Page { 
    opacity: 0; 
    width:70%; 
    min-height: 300px; 
    background:white; 
    text-align: center; 
    border-radius: 20px; 
    position:relative; 
    padding:20px; 
    margin:0 auto; 
} 

在document.ready()，当我加载HTML

$("#Page").position().top=$("#Page").outerHeight()*-1; 
$("#Page").animate({top:$(".row").outerHeight(),opacity:'1'},1500); 

和.click功能

$("#Page").css('opacity','0'); 
$("#Page").position().top=$("#Page").outerHeight()*-1; 
$("#Page").animate({top:$(".row").outerHeight(),opacity:'1'},1500); 

似乎只有在document.ready我fadeindown作品。任何人都知道原因？

注：我尝试它只是在我的浏览器，不收留了它，甚至没有在本地主机

Answer 1

只需使用CSS：

#Page { 
    position: relative; 
    top: 0; 
    opacity: 1; 
    transition: all 0.3s ease-in; 
    -webkit-transition: all 0.3s ease-in; 
} 

.hidden-element { 
    position: relative; 
    top: -100px; 
    opacity: 0; 
    transition: all 0.3s ease-out; 
    -webkit-transition: all 0.3s ease-out; 
} 

然后jQuery来隐藏元素：

$("#Page").addClass('hidden-element'); 

并显示：

$("#Page").removeClass('hidden-element');