problème transparent Animer PNG sur Internet Explorer

Question

CSS code:

#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"}); 

Je n'ai aucun problème avec le code ci-dessus sur Firefox, Chrome et d'autres. Mais cela ne fonctionne sur aucune version d'Internet Explorer.

Le problème est que l'image PNG est rendue étrange, l'arrière-plan du PNG transparent est noir. Lorsque je supprime l'effet d'opacité, il n'y a pas de problème.

Quelle est la solution?

Answer 1

Il n'y a actuellement aucune solution à ce que je sache. Il suffit d'attendre IE pour rattraper le reste du monde. J'ai dû abandonner une telle fonctionnalité dans un projet récent il y a quelques jours. Vous ne pouvez malheureusement pas avoir un PNG à bords progressifs avec IE se fanant dans et hors avec jQuery.

Answer 2

Note intéressante: jQueryTOOLS utilise un GIF dans toutes les versions d'IE comme correction de bugs pour les info-bulles. Demo

Answer 3

Hey, on dirait que Sampson aurait pu se tromper. Voir le post de Dave Shea à ce sujet: http://mezzoblue.com/archives/2010/05/20/ie8_still_fa/

Je vais juste jeter trois paragraphes de la solution ici:

Bien sûr, aucune version de IE prend en charge la propriété d'opacité CSS encore, si jQuery au lieu applique l'opacité en exploitant le filtre propriétaire AlphaImageLoader d'IE. Ceci termine étant la cause première du bogue (seemingly well-known). Le correctif suggéré consiste à appliquer la transparence à l'élément parent à la place, mais j'ai eu peu de succès avec cette solution de contournement.

Qu'est-ce que le travail était une petite bibliothèque appelée DD_belatedPNG qui applique transparence PNG via VML au lieu de AlphaImageLoader. Il est conçu pour IE6, mais il fonctionne très bien dans IE7 comme bien. Pour IE8, j'ai été forcé de jeter sur un X-UA-Compatiblemeta tag et l'étape IE8 en mode IE7 pour cette page particulière .

Ce n'est toujours pas parfait. J'ai remarqué une zone de délimitation blanche faible poking à des opacités plus faibles qui ont forcé moi d'ajuster légèrement les effets hover pour toutes les versions de IE. Mais vous savez, pour tout cela, c'est sacrément bon assez.

---

Mmmhmmm ... Il est étrange que cette solution n'a pas pop quand cette question a été posée il y a 6 mois. Bien sûr, ce blog n'existait pas, mais la solution existait depuis longtemps. Étrange que personne ne s'en soit rendu compte ...

Answer 4

Pour moi, cela a suffi pour inclure la propriété filter avec une valeur vide dans jQuery.animate() function

Peut-être que cela fonctionnera pour vous aussi.

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

De plus, vous pouvez enlever la propriété de filtre du CSS de votre bouton.

Answer 5

filter:'' bidouille ne plus

Answer 6

Je pense que fonctionne pas avec jQuery actuelle (1.6.1), il y a une véritable solution ici: http://www.viget.com/inspire/jquery-ie-png-24-ie-black-background-issue-solved/

Dans mon cas, il a résolu le bg noir awefull sur mon .png animé image avec fond transparent. Ça a marché comme sur des roulettes. Testé sur ie7 + Je ne peux pas tester ie6 pour le moment.

espère que cela aidera tout le monde :) Julien

Answer 7

Utiliser une image PNG pour les navigateurs modernes (mozilla, Opera, Chrome, etc.):

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

Ajouter ce pour IE (Utilisez un autre CSS ou utilisation IE pirater)

/* ie fix */ 
background-image:none; 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/banner01.png", 
sizingMethod="crop"); 

Answer 8

Il y a une bibliothèque qui résout ce problème soi-disant: jCSML. Je l'ai essayé et cela fonctionne pour animer les png transparents dans IE 7+.

Answer 9

VOICI LE FIX! Mise à jour vers la dernière version de jQuery. C'est tout. Cela fonctionne après cela.

Answer 10

Merci à Julien pour sa réponse, ça m'a mené dans la bonne direction! Cependant, je recevais toujours un halo gris autour du texte pendant la transition d'opacité de l'image. Il semblait bien quand il était statique, mais il créait toujours un étrange halo gris léger (IE 8). Je l'ai réparé en changeant aux valeurs ci-dessous.

En outre, j'ai dû déclarer séparément la propriété "zoom: 1", car IE 8 écrasait juste cette valeur à la fin de la propriété background. Même chose avec background-color: transparent; IE suce.

Mon CSS travail:

.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; 
} 

Notez que je devais changer endColorstr=#00FFFFFF à endColorstr=#FFFFFFFF.

Pour réitérer Julien, cette solution est venue de Viget.com.