Сбой анимации в IE

Question

jsFiddle

Я пытаюсь создать плагин jQuery, который позволит нам добавлять анимацию входа и выхода в разметке.

У меня есть входная анимация, работающая в Chrome и Firefox, но они не действуют в IE7 или IE8

Анимация выполнена

animate({'top':posData.top+'px', 'left': posData.left+'px', 'opacity': 1}, speed)

или его разновидность (в зависимости от требуемого направления). posData регистрируется в консоли, чтобы вы могли видеть возможные значения. speed устанавливается в начале плагина.

Answer 1

Было сочетание этих факторов:

• Элементы, необходимые для hasLayout
• Необходимо использовать фильтр: альфа (непрозрачность = 70); для непрозрачности, чтобы работать правильно
• Похоже, что Chrome не нравится заглавные буквы в атрибутах data, что заставило меня удалить их в JavaScript. Chrome и Firefox были довольны этим, но IE настаивал на совпадении случаев, поэтому изменил атрибуты data- в HTML на строчные и убедился, что их аналоги JS совпадают.

Answer 2

IE8 и IE7 не поддерживают CSS2 - opacity, вам потребуется filter: alpha(opacity=70);.Пожалуйста, прочитайте больше деталей здесь .

В вашем jsFiddle вы изменяете непрозрачность div.Поскольку IE8 и IE7 не поддерживают opacity, вы не видите никакой анимации.

EDIT

Установите этот этот пост наТАК.В нем упоминается о hasLayout, который решил проблему.

Надеюсь, это поможет вам.

Answer 3

это можно исправить, если установить непрозрачность на 0 с помощью jQuery .css():

http://jsfiddle.net/meo/UtbSY/1/

$('.animate').anim().css({"opacity": 0});

jQuery использует правильный фильтр непрозрачности для данного браузера.

Или вы могли бы использовать фильтры в CSS напрямую, я полагаю, как упомянул Амар ... (Но тогда проверка CSS не удалась)