让DIV不会显示在它的容器外面

Question

我正在使用JQuery制作一个非常基本的动画.基本上我所拥有的是DIV,其宽度为60%,高度为80%,并且包含手册.我的目标是,当您浏览手册中的页面时,当前页面会向上移动并消失,下一页从底部开始.

我足够接近,但有些事情是错的,我无法理解如何解决它 - 页面DIV在容器外可见.他们的顶级财产设定为110%但我可以看到它没有生效.他们的位置只受上面菜单表的影响.

所以我的问题,实际上是 - 如何在容器外部使DIV不可见,但不改变整个DIV的可见性或显示,所以在向上移动时会看到文本 - 但只有放在容器上的文本和不在它之外.

    .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;
}

注意BigWindow是容器,manualPage是页面.

这是函数,但我认为CSS问题是首先要解决的问题:

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

基本上这是通过添加CSS来完成的

overflow: hidden;

到封闭的容器,但没有看到这里的代码,获得帮助很难.