Slide div from minus top value

I'm a begier to jquery. I want to make a simple fadeindown when I click a button, but from the above the screen,e.g. minus top value. But what I get is only sliding in the page, not from above. And it only works once when I load the html. After that, opacity is the only one working. Here's the sample code:

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

in document.ready() , when I load the html

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

and the .click function

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

it seems only in document.ready that my fadeindown works. Anyone know the reason?

N.B: I try it only in my browser,not hosting it,not even at localhost