Discussion :

[Sayrus]

Bonjour,

J'ai un problème lorsque j'essaie d'animer une DIV contenant un PNG transparent sous la série des IE (7,8)

En effet, la transition d'une opacité de 0 vers 1 masque l'image par une opacité noir.

Exemple:

CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#maDiv
{
    opacity:0
    background:url('images/mon_PNG_transparent.png');
    width:980px;
    height:600px;
}

Code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$('#maDiv').animate({'opacity':1},3000);

Donc en gros, ma div contenant le png transparent est au chargement du navigateur sur une opacité de 0 (donc invisible)

Ensuite, une animation de 3 seconde est lancée pour que l'opacité de cette DIV atteigne une opacité de 1 (maximum).

Pendant cette transition, le PNG transparent devient tout NOIR (on ne voit donc plus l'image), quand la transition de 3 secondes est terminée, ce noir disparait et l'image apparait...

Inutile de vous dire que ce bug est uniquement lié à Intermerde Explorer et que tout fonctionne à merveille sous FF, Chrome, Safari, Opéra, etc.

Quelqu'un sait comment fixer le problème?

Un grand merci!

[danielhagnoul]

Bonsoir.

IE ne gère pas la propriété CSS opacité. Pour les PNG je crois que les anciennes versions ne les gèrent pas mieux (personnellement je n'utilise plus aucune version de IE depuis des mois).

Il est tout de même possible de jouer sur l'opacité en passant par jQuery et les méthodes fadeIn, fadeOut et fadeTo.