JQuery - Анимационный элемент, у которого есть дети, абсолютно расположенные вне него - мигает

Простите меня, если это было рассмотрено раньше, ничего не нашли.

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

Что происходит, как только анимация запускает дети, они исчезают, а затем снова появляются, когда анимация завершена. Как будто анимация должна завершиться до того, как браузер узнает, куда поместить детей.

Я загрузил действительно простой пример здесь, все скрипты, включенные на страницу: http://www.ismailshallis.com/jdemo/

Что на самом деле происходит? Каковы мои варианты, чтобы обойти это?

Большое спасибо заранее,

Белинда

Ответ 1

Когда jquery анимирует либо высоту, либо ширину элемента, он автоматически устанавливает overflow: hidden в элементе во время анимации. Поскольку ваш дочерний элемент расположен снаружи, он технически является частью переполнения. Комментарий в источнике jquery около кода, который делает это, говорит: "Удостоверьтесь, что ничего не пробирается". Если вы включите несжатый источник jquery и закомментируете строку 4032 jquery-1.3.2.js(внутри функции animate):

//this.style.overflow = "hidden";

Вы увидите, что анимация работает так, как вы планировали. Я не уверен в обходном пути, кроме изменения источника jquery, комментируя эту строку выше.

Ответ 2

В jQuery 1.4.3 есть другое решение, которое не требует изменения jQuery. Если вы установите стиль переполнения элемента, который вы анималируете как встроенный стиль, прежде чем запускать анимацию, тогда jQuery не будет скрывать стиль переполнения. Например:

<script type="text/javascript">
    $(document).ready(function() {
        $("#box a").click(function() {
            $("#box")

            // Prevents absolutely positioned elements from getting clipped.
            .css('overflow', 'visible')

            .animate({
                height: "410px"
            })

            // Reset the 'overflow' style.  You could also put this in the 
            // animate() callback.
            .css('overflow', '');
        });
    });
</script>

Ответ 3

Ну, похоже, что это функция браузера или jQuery, не обязательно того, как вы создали свой HTML или Javascript. Я говорю об этом, потому что кажется, что только пиксельная область внутри ограничивающей рамки элемента DOM представляется визуализированной (попробуйте переместить текст так, чтобы половина текста была снаружи, а половина внутри... вы видите "отрезанную" часть текста при его оживлении.)

Итак, работа вокруг: он использует обертку DIV вокруг "#box" и "#outside", так что они находятся внутри ограничивающей рамки оболочки.

CSS

    #boxWrapper {
        position: fixed;
        top: 50%;
        left:  50%;
        width: 200px;
        height: 200px;
        margin-left: -100px;
        margin-top: -120px; /* extra 20px for the #outside */
        background:#ccc;
    }

    #box {
        background: #000;
        height:100%;
        width:100%;
        margin-top:20px; /* give 20px for the #outside */
    }

    #outside {
        background:darkblue;
        position: absolute;
        top: 0px;
        right: 0; }

И HTML:

<div id="boxWrapper">
    <div id="box">
        <a href="#">CLICK ME</a>
        <div id="outside">
            I'm positioned OUTSIDE the box
        </div>
    </div>
</div>

И Javascript:

<script type="text/javascript">
    $(document).ready(function() {

            $("#box a").click(function(){
                $("#boxWrapper").animate({ 
                        height: "410px",
                        opacity: 0.9,
                        top: "25%"
                      }, 1000 );
                return false;
            });
        }); 

</script>

Ответ 4

В качестве альтернативы вы можете указать, что ваш элемент остается visible с помощью спецификации !important.

#box {
  overflow: visible !important;
}