Discussion :

[Sylvain.S]

Bonjour,

Ne trouvant pas ma réponse sur le web je me permet de poster mon problème ici au cas où quelqu'un aurait déjà eu le même soucis et aurait trouvé la solution...

Je suis en train de réaliser un site sur lequel je dois animer l'opacité d'une image PNG avec jQuery. Jusque là aucun problème, j'ai utilisé la fonction suivante:

Code :

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

$('#foo').fadeTo(duration, opacity);

Tout marche très bien que ce soit sur Chrome, Firefox, Opera où même IE6 grâce à un PNG fix...

Malheureusement il reste deux navigateurs qui me posent problème et il s'agit d'IE7 et d'IE8. En effet ceux-ci ne gèrent pas correctement l'animation d'opacité d'un PNG 24 bits et préfèrent ajouter un masque noir sur l'image.

Apparemment le problème est récurrent sur ces deux version d'IE et je ne suis pas le seul à l'avoir eu. J'ai bien sûr déjà testé tout un tas de bidouilles et de hacks mais aucun ne s'est avéré efficace dans mon cas.

Donc si vous avez déjà eu le même problème et que vous avez découvert une solution merci de bien vouloir m'éclairer...

Merci d'avance à ceux qui prendront le temps de répondre.

[eckerdecker]

Salut,

Je suppose que si tu utilises fadeTo c'est que tu ne veux pas faire complétement apparaitre ou disparaitre ton png.
As-tu quand même essayé avec fadeIn et/ou fadeOut pour voir si tu avais le même problème ?
As-tu essayé avec animate() ?
Est-ce que ce ne serait pas dû à ton pngFix pour IE6, qui serait appliqué à IE7 et 8 alors qu'ils n'en ont pas besoin ?

Je ne suis pas en mesure de tester alors je te pose des questions des fois que ça fasse avancer ta réflexion

[Sylvain.S]

Oui en effet je veux varier d'une certaine valeur à une certaine valeur sans pour autant le faire disparaître complètement d'où le fadeTo. J'ai bien essayé avec la fonction animate avec pour test le code suivant:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function animateReflection(object_id, opacity_min, distance, time){
 
	$('#'+object_id+'').animate({
			opacity:'1',
			marginTop:'-='+distance+'',
			filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'
		}, time).animate({
			opacity:''+opacity_min+'',
			marginTop:'+='+distance+'',
			filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity='+(opacity_min*100)+')'
		}, time);
 
	setTimeout("animateReflection('"+object_id+"', "+opacity_min+", "+distance+", "+time+")", time);
}

Mais l'animation de l'opacité n'est pas prise en compte sous IE7 et IE8.
En ce qui concerne le pngFix() j'ai bien essayé sans mais c'est le même résultat.

[SpaceFrog]

Voir également ces threads ...
http://www.developpez.net/forums/d95...e-sous-ie-png/

http://www.developpez.net/forums/d93...texte-sous-ie/