jQuery fadeIn IE Png Проблема при загрузке с внешнего - PullRequest
Новая
       30

jQuery fadeIn IE Png Проблема при загрузке с внешнего

1 голос
/ 27 ноября 2009

Я загружаю данные из внешних html-файлов в моем домене в div на моей веб-странице, используя метод загрузки контента в jQuery. Я вынимаю div из новой страницы, скрывая div на текущей странице, постепенно исчезая и добавляя новый. В обоих этих div есть изображение png, и оно создает ужасные черные капли в IE, отлично работает в других браузерах, но из-за неспособности IE обрабатывать несколько фильтров это создает беспорядок.

Я пытался использовать исправление png модуля безрезультатно, есть ли у кого-нибудь какие-либо исправления или идеи, которые помогут сохранить мои pngs хорошо выглядящими во время этого перехода?

i46.tinypic.com / t9dtvr.jpg это скриншот проблемы, ура

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

Ответы [ 7 ]

6 голосов
/ 27 ноября 2009

Нет 100% решения проблемы. Если у вас есть полупрозрачные области PNG, любые примененные фильтры сделают эти области полностью непрозрачными. Большинство переходов замирания, которые я видел, применяют фильтр во время замирания, а затем удаляют фильтр. Это означает, что вы увидите области с псевдонимами, в то время как изображение постепенно исчезает, но в конце перехода оно будет выглядеть хорошо.

Другое решение может использоваться для статических частей страницы: если фон за изображением статичен, вы можете создать изображение из этого фона и использовать его в качестве фонового изображения вашего тега img. Тогда исчезновение будет работать нормально. Если изображение в формате png уже является фоновым изображением элемента, вам нужно поместить его в контейнер с установленным непрозрачным фоновым изображением и заменить его.

Если вы затихаете перед текстовым или динамическим содержимым, вы мало что можете сделать.

РЕДАКТИРОВАТЬ: Кажется, что на следующей странице есть решение, включающее старый фильтр AlphaImageLoader и родительский div с установленным фильтром непрозрачности:

http://blog.mediaandme.be/?ref=17

3 голосов
/ 09 октября 2012

У меня была похожая проблема с выцветанием элементов с прозрачным png-фоном. После некоторого исследования я нашел эту страницу, где в конце вы найдете решение, которое мне помогло:

http://www.sitepoint.com/forums/showthread.php?590295-jQuery-fadein-fadeout-of-transparent-png-in-IE7-and-Chrome

Пользователь dan.tello использовал дополнительные фильтры (CSS) в IE: 

.item img {
  background: transparent;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
  zoom: 1; }
2 голосов
/ 27 ноября 2009

РЕДАКТИРОВАТЬ: Я пришел к сообщению, что это безнадежно, но на самом деле есть некоторые люди, описывающие обходные пути. Посмотрите, поможет ли это:

http://groups.google.com/group/jquery-dev/browse_thread/thread/1f693c5f4e8ea650/f3bc9685ccb40e70?pli=1 http://blogs.msdn.com/ie/archive/2005/04/26/412263.aspx

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

У меня была похожая проблема. Мне нужно было загрузить один из нескольких прозрачных PNG-файлов на мою страницу на основе пользовательского ввода и заставить его исчезнуть. В итоге я использовал запоздалое исправление Drew Diller PNG (предназначенное для IE6). Вызов готового документа, конечно, не работает для динамического содержимого, поэтому вот как выглядит мой скрипт: 

html = '<img src="selectedimage.png" />';
$('#overlay').html(html);
DD_belatedPNG.fix('#overlay img');
$('#overlay img').hide().fadeIn(1200);

Он отлично работает в IE7, но я еще не тестировал IE8.

0 голосов
/ 23 февраля 2011

@ jdln - Я не уверен, к чему она стремилась и объяснила это неправильно, или это другое решение, однако это сработало для меня:

  1. Применение прозрачного PNG к элементу оболочки
  2. Примените ваше затухание к элементу ВНУТРИ обертки. Похоже, это заставляет также отображаться элемент оболочки.
  3. Скрыть элемент обертки, показать элемент содержимого с помощью jQuery fade

Например: 

/* HTML: */
<div id="wrapper">
    <div id="content">I use this for a drop-down menu with a transparent PNG shadow for lte IE8 browsers
    </div>
</div>

/* CSS */
#wrapper{margin-left:-9999px;}

/* jQuery */  
$('#content').hide().fadeIn();

Я использую .hide (), чтобы убедиться, что эффект начинается каждый раз с начала, так как я вызываю это из события hover. Надеюсь, это помогло!

0 голосов
/ 20 марта 2010

все, что вам нужно сделать, это заставить обертку (стиль) вокруг элемента (#outer (имеет фоновый png)) уменьшить прозрачность до 1,0 в файле js. прекрасно работает!

например:

js файл: 

$('#style').fadeIn('slow');

Файл CSS: 

#style
{
    margin:0;
    background:transparent;
    float:left;
}
0 голосов
/ 27 ноября 2009

Можете ли вы дать изображению png (или элементу, который исчез) значение background-color, отличное от прозрачного? Это в основном hels.

...