Прерывистая / дерьмовая анимация в IE с использованием jquery opacity animate

#javascript #jquery #internet-explorer

Вопрос:

Я понимаю, что есть несколько вопросов по поводу анимации непрозрачности — поэтому, прежде чем кто-либо пойдет на все RTFM на меня — я проверил, и я не смог найти ни одного с моей конкретной проблемой

Рассмотрим следующий код:

 $("#contentTabs li").live({
     mouseenter: function () {
          $(this).find("span.tabTitle").stop(true, true).animate({
             marginTop: "-25px"
          }, 250);
     },
     mouseleave: function () {
          $(this).find("span.tabTitle").stop(true, true).animate({
             marginTop: "-10px"
          }, 500);
     }
});

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

Теперь я вставил это в:

  $("#contentTabs li span.tabTitle").css({ opacity: 0.70 });
 $("#contentTabs li span.tabTitleText").css({ opacity: 1 });

Непосредственно перед объявлением в реальном времени. И это все еще быстро в других браузерах, кроме IE.

Почему эта непрозрачность так сильно изменилась? И можно ли как-нибудь помочь, кроме указания браузерам IE не выполнять затухание?

Редактировать:

Извините — основной вопрос — навыки меня подводят, проверенная версия IE: 8

1. какую конкретную версию IE вы используете?

2. Непрозрачность в IE8 и ниже и в лучшие времена очень неустойчива, а попытка ее анимировать, скорее всего, сделает ситуацию еще хуже. С этим мало что можно поделать; это плохой браузер. Лучший вариант: найдите альтернативный способ достичь желаемого, по крайней мере, в IE8 или ниже.

Ответ №1:

Непрозрачность — это не тривиальная задача для компьютеров, потому что она требует довольно много вычислений, а JavaScript и движки рендеринга IE 8 и близко не так оптимизированы, как в современных браузерах.

В принципе, вы ничего не можете там сделать, кроме как избежать ненужных спецэффектов в IE <9.

1. Интересно, какой была бы производительность, если бы вместо непрозрачности css использовалось прозрачное наложение png?

2. Учитывая, что IE 6 не поддерживает альфа-прозрачность в PNG, а когда это происходит, он использует ту же «технологию фильтрации», что и для непрозрачности, я не думаю, что это сильно помогло бы. Но, возможно, стоит попробовать.

3. Я просто думаю, что это странно — потому что я на самом деле не анимирую прозрачность — это статично, но я перемещаю прозрачный элемент. И я все равно не планирую предлагать поддержку чего-либо ниже ie 7