jQuery .animate и отрицательная маржа в IE8 - PullRequest
1 голос
/ 17 января 2012

У меня проблема с анимацией в Internet Explorer 8. Используемый код работает во всех хороших браузерах и даже работает, как и ожидалось, в Internet Explorer 7.

Базовая компоновка - 2элементы div плавают друг над другом в контейнере div.

Непосредственно перед анимацией я добавляю третий элемент div поверх остальных 2 с высотой 0 и полем -10 (Контейнер div имеет высоту, соответствующую 2 внутри него, новый должен выглядеть так, как будто он растет сверху.

Затем я использую .animate для нового div и анимирую высоту x иПоля -y (где -y на 10 больше, чем x).

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

Но в Internet Explorer 8 приведенные ниже элементы делятся поверх нового!

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

Вот код анимации:

        var height_to_set = $('#splash').height() - 95;
        $('#splash').children('.tag').prepend('<div class="tag_explain"> </div>').children('.tag_explain').css( 'background-color' , bgc ).animate(
        {
            height:height_to_set,
            'margin-top':'-'+(height_to_set+10)+'px'
        } , 300 );

У кого-нибудь есть какие-либо предложения относительно того, в чем здесь может быть проблема?

...