使DIV不在容器的外部显示 [英] Make a DIV not be shown outside it's container

问题描述

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

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.

我已经足够亲密，但是出了点小问题，而且我不知道如何解决它- 页面DIV在其容器外部可见.他们的top属性设置为110％，但我看不到它没有生效.它们的位置仅受其上方菜单表的影响.

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.

所以我的问题确实是-如何在容器的外部使DIV不可见，而又不改变整个DIV的可见性或显示方式，因此在向上移动时将看到文本-但仅显示文本放在容器上而不在容器外面.

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

请注意，BigWindow是容器，manualPage是页面.

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

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

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

推荐答案

基本上，这是通过添加CSS

basically this is done by adding CSS

overflow: hidden;

到封闭的容器中，但是在这里看不到代码，很难获得帮助.

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

这篇关于使DIV不在容器的外部显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！