jQuery fadeIn IE PNG problema quando carregado a partir externo

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

Pergunta

Eu estou carregando dados de arquivos HTML externo dentro do meu domínio em um div na minha página usando um método de conteúdo de carga em jQuery. Tomo a div fora da nova página enquanto escondendo o div na página atual por desaparecendo esta fora e desaparecendo o novo. Há uma imagem png em ambos os divs e ele está criando horrível manchas negras no IE, funciona bem em outros navegadores, mas devido a IEs incapacidade de múltipla processo filtra o seu fazer uma bagunça.

Eu tentei usar a unidade png fix sem sucesso, alguém tem quaisquer correções ou idéias para ajudar a manter meus pngs olhando agradável durante esta transição?

i46.tinypic.com/t9dtvr.jpg este é um screenshot do problema, aplausos

também descobriu que o png que está na página originalmente (antes de novo carregamento nada) desaparece dentro e fora perfeitamente utilizar a unidade png fix mas carregamento coisas dentro e depois pra fora de arquivos externos não funciona. Ive adicionado a correção para essas páginas também, mas isso não funciona também.

Foi útil?

Solução

Não há qualquer solução 100% para o problema. Se você tem áreas transparentes semi de um PNG, quaisquer filtros aplicados irá processar essas áreas totalmente opaco. A maioria desaparecendo transições que eu vi aplicar o filtro durante o fade, em seguida, retire o filtro depois. Isto significa que você vai ver as áreas alias enquanto os fades de imagem em, mas ele vai olhar bem no final da transição.

Outra solução pode ser usado para partes de uma página que são estáticas: Se o fundo atrás da imagem é estática, você pode criar uma imagem do que de fundo e usá-lo como a imagem da sua tag img fundo. Então, entrando e saindo vai funcionar muito bem. Se a imagem png já é a imagem de fundo de um elemento, você precisa colocá-lo em um recipiente com o opaco conjunto imagem de fundo e fade que em vez.

Se você está desaparecendo na frente do texto ou conteúdo dinâmico, não há muito que você pode fazer.

EDIT: A página a seguir parece ter uma solução que envolva o velho filtro AlphaImageLoader e uma div pai com o conjunto de filtros de opacidade:

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

Outras dicas

Eu tive um problema semelhante com desaparecendo em elementos com um png-fundo transparente. Após alguma pesquisa eu encontrei esta página, onde no final você vai encontrar uma solução, que me ajudou:

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

O usuário dan.tello filtros adicionais usados ??(CSS) no 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; }

EDIT: Eu vim para deixar que é impossível, mas há realmente algumas pessoas descrevem como contorná-las. Ver se isso ajuda:

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

Eu estava tendo um problema semelhante. I necessário para carregar um dos vários PNGs transparentes em minha página com base na entrada do usuário, e tê-lo desaparecer. Eu acabei usando correção Belated PNG de Drew Diller (destinado a IE6). Chamando em documento pronto não funciona para conteúdo dinâmico é claro, então aqui está o meu script se parece com: 

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

É muito bom trabalhar no IE7, mas eu não testei IE8 ainda.

Você pode dar a imagem PNG (ou o elemento que está desbotada) um valor background-color diferente transparente? Que em sua maioria hels.

@jdln - Eu não tenho certeza se é isso que ela estava indo para e explicou tudo errado, ou se esta é uma outra solução, no entanto, isso funcionou para mim:

  1. Aplique o PNG transparente para um elemento de invólucro
  2. Aplicar o seu desbotar a um elemento dentro do invólucro. Este parece forçar o elemento wrapper para exibição também.
  3. Esconder o elemento envoltório, mostram o elemento de conteúdo usando jQuery desvanecimento

Por exemplo: 

/* 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();

Eu uso .hide () para se certificar de que o efeito começa desde o início de cada vez, como eu estou chamando isso de um evento hover. Espero que este ajudou!

tudo que você tem a fazer é fazer o invólucro (estilo) em torno do elemento (#outer (tem png fundo)) desaparecer a opacidade para 1,0 em arquivo js. funciona muito bem!

ex:

js arquivo: 

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

arquivo css: 

#style
{
    margin:0;
    background:transparent;
    float:left;
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top