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

Question

Простите меня, если этот вопрос уже рассматривался ранее, но я ничего не смог найти.

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

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

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

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

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

Белинда

Answer 1

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

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

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

Answer 2

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

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

Answer 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>   

Answer 4

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

#box {
  overflow: visible !important;
}