jQuery fadeIn IE Png Problème lors du chargement depuis externe

Question

Je charge des données de fichiers HTML externes de mon domaine dans une div de ma page Web à l'aide d'une méthode de chargement de contenu dans jQuery. Je retire le div de la nouvelle page tout en cachant celui-ci dans la page actuelle en le fondant en fondu. Il y a une image png dans ces deux divs et elle crée d'horribles blobs noirs dans IE, fonctionne très bien. dans d’autres navigateurs, mais en raison de l’incapacité des IE à traiter plusieurs filtres, cela crée un désordre.

J'ai essayé d'utiliser le correctif png de l'unité sans succès, est-ce que quelqu'un a des correctifs ou des idées pour que mes pngs restent beaux pendant cette transition?

i46.tinypic.com/t9dtvr.jpg Ceci est une capture d'écran du problème, bravo

a également découvert que le png qui se trouve sur la page d'origine (avant de charger quoi que ce soit de nouveau) apparaît et disparaît parfaitement à l'aide du correctif png de l'unité, mais le chargement et le retrait de fichiers externes ne le sont pas. J'ai ajouté le correctif à ces pages aussi, mais cela ne fonctionne pas non plus.

Answer 1

Il n’ya pas de solution à 100% au problème. Si vous avez des zones semi-transparentes d'un fichier PNG, tous les filtres appliqués rendront ces zones totalement opaques. La plupart des transitions de fondu que j'ai vues appliquent le filtre pendant le fondu, puis retirent le filtre. Cela signifie que vous verrez les zones avec un aliasing pendant que l'image s'estompe mais que tout se passera bien à la fin de la transition.

Une autre solution peut être utilisée pour les parties statiques d'une page: si l'arrière-plan derrière l'image est statique, vous pouvez créer une image à partir de cet arrière-plan et l'utiliser comme image d'arrière-plan de votre balise img. Ensuite, les fondus enchaînés fonctionneront parfaitement. Si l’image png est déjà l’image d’arrière-plan d’un élément, vous devez la placer dans un conteneur contenant l’image d’arrière-plan opaque, puis la fader.

Si vous passez devant du texte ou du contenu dynamique, vous ne pouvez pas faire grand chose.

MODIFIER: La page suivante semble proposer une solution associant l'ancien filtre AlphaImageLoader et un div parent avec le jeu de filtres d'opacité défini:

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

Answer 2

J'ai eu un problème similaire avec le fading dans les éléments avec un fond transparent en png. Après quelques recherches, j'ai trouvé cette page, où vous trouverez une solution à la fin, qui m'a aidé:

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

L'utilisateur dan.tello a utilisé des filtres supplémentaires (CSS) dans 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; }

Answer 3

EDIT: Je suis venu pour poster que c'est désespéré, mais il y a en fait certaines personnes décrivant des solutions de rechange. Voir si cela aide:

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

Answer 4

J'avais un problème similaire. J'avais besoin de charger l'un des nombreux PNG transparents dans ma page en fonction des entrées de l'utilisateur et de le faire disparaître en fondu. J'ai finalement utilisé le correctif Belated PNG de Drew Diller (destiné à IE6). Appeler lorsque le document est prêt ne fonctionne bien sûr pas pour le contenu dynamique, voici donc à quoi ressemble mon script:

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

Cela fonctionne très bien dans IE7, mais je n'ai pas encore testé IE8.

Answer 5

Pouvez-vous attribuer à l'image png (ou à l'élément estompé) une valeur couleur d'arrière-plan autre que transparente? C'est surtout hels.

Answer 6

@jdln - Je ne sais pas si c'est ce qu'elle voulait et si c'était mal expliqué, ou s'il s'agit d'une autre solution, mais cela a fonctionné pour moi:

1. Appliquer le fichier PNG transparent à un élément wrapper
2. Appliquez votre fondu à un élément DANS le wrapper. Cela semble forcer l'élément wrapper à s'afficher également.
3. Masquer l'élément wrapper, afficher l'élément de contenu à l'aide de fader jQuery

Par exemple:

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

J'utilise .hide () pour m'assurer que l'effet commence depuis le début à chaque fois, car j'appelle cela depuis un événement survolé. J'espère que cela vous a aidé!

Answer 7

tout ce que vous avez à faire est de faire en sorte que le wrapper (style) entourant l'élément (#outer (a png d'arrière-plan)) atténue l'opacité à 1,0 dans le fichier js. fonctionne très bien!

ex:

fichier js:

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

fichier css:

#style
{
    margin:0;
    background:transparent;
    float:left;
}