Make a DIV not be shown outside it's container

Question

I'm making a very basic animation with JQuery. Basically what I have is a DIV in the size of 60% width, 80% height and it contains a manual. My goal is that when you go through pages in the manual, the current page moves up and disappears and the next page comes up from the bottom.

I'm close enough, but something's just wrong and I can't get an idea on how to fix it - The page DIVs are visible outside their container. Their top property is set to 110% yet I can see it doesn't take effect. Their position is only affected by the menu table above them.

So my problem, really is - how do I make a DIV invisible outside it's container, but without changing the visibillity or display of the whole DIV, so the text will be seen when moving up - but only the text that lays on the container and isn't outside it.

    .manualPage {
    color:rgba(241, 241, 241,1.0);
    top:110%;
    text-align:left;
    left:0%;
    cursor:default;
    z-index:30;
    font-family: "Open Sans", sans-serif;
    font-size:11pt;
    width:100%;
    height:100%;
}

.BigWindow {
    position:absolute;
    width:60%;
    height:80%;
    top:10%;
    display:inline-block;

    left:-70%;

    background-repeat:repeat;

    color:rgba(241, 241, 241,1.0);

    font-family: "Open Sans", sans-serif;
    font-size:12pt;

    text-align:center;

    cursor:default;

    z-index:30;
}

notice that BigWindow is the container, manualPage is a page.

Here's the function, but I think the CSS problem is the one to be solved first:

var currentPage = -1;

function setManualPage(num) {
    if ($('#manualMenu').css('display') != 'none')
        $('#manualMenu').fadeOut(750);
    if (currentPage != -1) {
        $('#page' + currentPage).animate({ top: '-100%' }, screen.availHeight / 2, function () { $('#page' + currentPage).css('top', '110%'); });
    }

    if (num != -1)
        $('#page' + num).animate({ top: '0%' }, screen.availHeight / 2);
    currentPage = num;
}

Answer 1

basically this is done by adding CSS

overflow: hidden;

to the enclosing container, but without seeing the code over here, getting help is hard.

Answer 2

try

 .manualPage{opacity:0}

OR

.manualPAge{visibility:hidden}

this way, all ages ( #page1 , #page2 etc) with class manualPAge would not be visible.

during the animation, when you are setting the top property, set the opacity to 1 OR visibility to visible

another way to do it is to set the overflow property of the containing window:

          .BigWindow{overflow:hidden} 

this way, any content exceeding the height of the .BigWindow would not be shown