Прозрачная проблема анимации PNG в Internet Explorer - PullRequest
Новая
       35

Прозрачная проблема анимации PNG в Internet Explorer

5 голосов
/ 04 марта 2010

Код CSS: 

#btn{
  background: url(transparent.png) no-repeat;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}

JavaScript / JQuery: 

$("#btn").animate({opacity:1,"margin-left":"-25px"});

У меня нет проблем с кодом выше для Firefox, Chrome и других. Но это не работает ни на одной версии Internet Explorer.

Проблема в том, что изображение PNG выглядит странно, фон прозрачного PNG выглядит черным. Когда я убираю эффект непрозрачности, нет проблем.

Какое решение?

Ответы [ 10 ]

11 голосов
/ 21 ноября 2010

Для меня это работало просто включить свойство фильтра с пустым значением в функцию janu .animate ()

Может быть, это будет работать и для вас.

$("#btn").animate({opacity:1,"margin-left":"-25px", filter:''});

Кроме того, вам может потребоваться удалить свойство фильтра из CSS вашей кнопки.

7 голосов
/ 22 июня 2011

filter:'' хак больше не работает с текущим jQuery (1.6.1)

5 голосов
/ 04 марта 2010

В настоящее время нет решения, о котором я знаю. Просто нужно подождать, пока IE догонит весь остальной мир. Мне пришлось отказаться от такой функции в недавнем проекте всего несколько дней назад. К сожалению, у вас не может быть PNG с перьями, когда IE затухает и исчезает с JQuery.

4 голосов
/ 31 августа 2010

Эй, похоже, Сэмпсон мог ошибаться. Смотрите пост Дэйва Ши на этом: http://mezzoblue.com/archives/2010/05/20/ie8_still_fa/

Я просто собираюсь выбросить три параграфа решения здесь:

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

Что сработало, так это небольшая библиотека под названием DD_belatedPNG , которая применима Прозрачность PNG через VML вместо AlphaImageLoader. Он предназначен для IE6, но он отлично работает в IE7 как Что ж. Для IE8 меня заставили скинуть тег X-UA-совместимый meta и переведите IE8 в режим IE7 для этого конкретная страница.

Это все еще не идеально. Я заметил слабую белую сковывающую ограничивающую коробку через при более низких помутнениях, которые заставили мне немного настроить эффекты при наведении для всех версий IE. Но ты знаешь, несмотря на это, это чертовски хорошо достаточно.

Мммммм ... Странно, что это решение не появилось, когда этот вопрос был задан 6 месяцев назад. Конечно, этого поста в блоге не было, но решение существовало довольно давно. Странно, что никто этого не заметил ...

2 голосов
/ 13 сентября 2011

Используйте PNG-изображение для современных браузеров (Mozilla, Opera, Chrome и т. Д.): 

background:url(../images/banner01.png) no-repeat right 13px;

Добавьте это для IE (используйте другой CSS или используйте взлом IE) 

/* ie fix */
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/banner01.png",
 sizingMethod="crop");
2 голосов
/ 03 августа 2011

Я думаю, что здесь есть реальное решение: http://www.viget.com/inspire/jquery-ie-png-24-ie-black-background-issue-solved/

В моем случае это решило ужасную черную bg на моем анимированном изображении png с прозрачным фоном Оно работало завораживающе. Проверено на ie7 +. На данный момент я не могу проверить ie6.

Надеюсь, это поможет каждому :) Julien

1 голос
/ 31 августа 2010

Интересное примечание: jQueryTOOLS использует GIF во всех версиях IE в качестве исправления для всплывающих подсказок. Демо

0 голосов
/ 19 марта 2014

Спасибо Жюльену за его ответ, он привел меня в правильном направлении!

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

Кроме того, мне пришлось отдельно объявить свойство «zoom: 1», потому что IE 8 просто уничтожал это значение до конца, свойство background. То же самое с background-color: transparent; IE отстой.

Мой рабочий CSS: 

.classOfParentElement img {
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#FFFFFFFF)"; /* IE 8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#FFFFFFFF); /* IE 6 & 7 */
}

.classOfParentElement img {
    -ms-zoom: 1;
    zoom: 1;
    background-color: transparent;
}

Обратите внимание, что мне пришлось изменить endColorstr=#00FFFFFF на endColorstr=#FFFFFFFF.

Чтобы повторить Жюльена, это решение пришло с Viget.com.

0 голосов
/ 11 ноября 2012

ЗДЕСЬ ИСПРАВЛЕНИЕ! Обновление до последней версии jQuery. Это оно. Это работает после этого.

0 голосов
/ 24 мая 2012

Существует библиотека, которая предположительно решает эту проблему: jCSML . Я пробовал, и он работает для анимации прозрачных PNG в IE 7+.

...