jquery png fadeIn fadeOut и чёрная обводка картинок

Несмотря на “корректную” реализацию прозрачности png в IE версии выше 6, при использовании Jquery функций fadeIn, fadeOut (а также fadeTo.. и вообще любых операций с прозрачностью), вокруг  прозрачных PNG-изображений создаётся чёрный ореол (чёрная обводка PNG-изображения).

Дело в том, что в IE версий >6 прозрачность реализована также при помощи фильтров

Вариант решения

  • создать дополнительный элемент в качестве обёртки для полупрозрачного изображения и уже для него изменять прозрачность - fadeIn|fadeOut
  • Задать для элемента-родителя цвет фона
  • Если после первых двух пунктов у PNG при изменении прозрачности остаются чёрные артефакты - указать для родителя  zoom:1

И да.. ещё для IE вместо fadeIn fadeOut можно использовать show и hide без всяких эффектов

http://forum.jquery.com/topic/transparent-png-shows-black-edges-in-ie8
http://stackoverflow.com/questions/1156985/jquery-cycle-ie7-transparent-png-problem
http://stackoverflow.com/questions/6965845/black-border-around-transparent-png-in-ie8
http://blog.pengoworks.com/index.cfm/2009/2/17/Fading-a-24bit-transparent-PNG-in-IE7
http://www.optimalworks.net/blog/2008/web-development/ie-png-filter-problems/comment-page-1
http://realtech.burningbird.net/graphics/css/opacity-returns-ie8

Метки: ,

Автор будет признателен, если Вы поделитесь ссылкой на статью, которая Вам помогла:
BB-код (для вставки на форум)

html-код (для вставки в ЖЖ, WP, blogger и на страницы сайта)

ссылка (для отправки по почте)

Добавить комментарий