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

StackOverflow https://stackoverflow.com/questions/1808015

Вопрос

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

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

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

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

Это было полезно?

Решение

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

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

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

<Ч>

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

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

Другие советы

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

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

http://groups.google .com / группа / JQuery-DEV / browse_thread / нить / 1f693c5f4e8ea650 / f3bc9685ccb40e70? пли = 1 http://blogs.msdn.com/ie/archive/ 2005/04/26 / 412263.aspx

У меня была похожая проблема. Мне нужно было загрузить один из нескольких прозрачных 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.

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

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

<Ол>
  • Применить прозрачный PNG к элементу-обертке
  • Примените ваше затухание к элементу ВНУТРИ оболочки. Похоже, это заставляет отображать также элемент оболочки.
  • Скрыть элемент обертки, показать элемент содержимого с помощью 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. Надеюсь, это помогло!

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

    бывший:

    файл js:

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

    css-файл:

    #style
{
    margin:0;
    background:transparent;
    float:left;
}
    Лицензировано под: CC-BY-SA с атрибуция
    Не связан с StackOverflow
    scroll top