Блог

Главная - Вопросы по программированию - Как скрыть анимированные текстовые элементы, когда они покидают границу div

Как скрыть анимированные текстовые элементы, когда они покидают границу div

#jquery #css #overflow

#jquery #css #переполнение

Вопрос:

Я пытаюсь создать div, который представляет собой поле с прокруткой кода в нем. Я хочу, чтобы код прокручивался снизу и выходил из верхней части div (в частности, границы div), не будучи видимым на остальной части страницы. Я пытался использовать свойство переполнения CSS, но, похоже, у меня не совсем получается.

Вот мой текущий код. Если вы запустите его в JSFiddle или каком-либо другом тестере, текст продолжит проходить за границу div. Как мне заставить его скрываться, когда он покидает границу?

HTML:

 <body>
    <div id = "code_box">
        <div id = "code_wrap">
            <div class = "xml_text">
                <code>XML text here will slowly scroll up at a fixed speed.  Lines pushed out of the page will be removed.</code>   
            </div>
        </div>
    </div>
</body>

CSS:

 html,body {
    height:98%; 
}
body {
    background-color: lightblue;
}
#code_box {
    margin: 10px;
    padding-left: 5px;
    width: 45%;
    height: 100%;
    background-color: black;
    border-radius: 20px;
    border-color: silver;
    border-style: double;
}
#code_wrap{
    height: 100%;
    overflow: hidden;
}
.xml_text {
    position:absolute;
    overflow: hidden;
    bottom: 0;
    width: 43%;
    color: white;
    padding: 10px;
    padding-bottom:20px;
}

Jquery:

 $(document).ready(
    function(){
        alert("running");

        $('#code_box').click(
            function(){
                $('.xml_text').animate({

                    height:' =1em'
                });
                $('#code_wrap').append("<div class = 'xml_text'><code>SomeExampleCode</code></div>");

            });
    });

Комментарии:

1. это #code_wrap не содержащий блок внутреннего div , потому что внутренний div имеет position:absolute , вы должны установить position:relative (или absolute ) для #code_wrap того, чтобы он стал содержащим блоком (контекстом) внутреннего div .

2. Спасибо, это очень помогает!