Discussion :

[g_escande]

Bonjour,

Mon client n'aime pas la fasson dont se charge les image c'est à dire de haut en bas "en sacade".

Pour palier à se probleme j'ai implanté la methode

Code :

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

$("img").fadeTo(10000, 1);

Mais image sont préalablement en opacity : 0

seulement le problème que j'ai c'est que cette animation ne fonctionne pas sur internet explorer. Et marche au contraire très bien sur les autres navigateurs

Merci de me venir en aide

[Bovino]

Salut

Mais image sont préalablement en opacity : 0

IE ne reconnait pas la propriété opacity

[g_escande]

Seulement Si je met :

filter : alpha(opacity=0); à la place opacity:0;

Si j'ai des PNG ben ca me met des bord noir autour

Deplus l'animation ne marche pas quand même.

[danielhagnoul]

Bonsoir.

Malgré qu'IE ignore opacity, on peut tout de même jouer avec fadeTo() sous IE7 et IE8 (IE6 pas testé) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
	<script type="text/javascript">
		$(document).ready(function() {
			$("#imgID").fadeTo(1, 0.1);
		});
 
		$(window).ready(function() {
			$("#imgID").fadeTo(5000, 0.9);
		});
	</script>
 
<img src="../images/imageTest.png" width="270" height="200" id="imgID" />

Mais il ne faut pas mettre l'image en display none ou en visibility hidden, elle doit toujours être un peu visible.

[Bovino]

Malgré qu'IE ignore opacity, on peut tout de même jouer avec fadeTo() sous IE7 et IE8 (IE6 pas testé

Oui absolument, ça marche aussi avec IE6
Seulement, il semble que g_escande initialise l'opacité en CSS et dans ce cas, opacity ne fonctionne pas avec IE, il faut déclarer les deux styles (voire 3 car je crois me souvenir que IE6 utilise filter et IE7 filters...)

[danielhagnoul]

Bonsoir.

Bientôt, tous les problèmes de compatibilité seront derrière nous (on peut commencer à rêver) grâce à http://www.developpez.net/forums/d81...google-chrome/

[Herode]

IE ne gère pas le style 'opacity' en effet.
jQuery offre cependant une manière efficace de contourner le problème sans avoir à multiplier les feuilles de style. Dans sa version 1.3, quelque chose du style (à partir d'images en display:none, opacity:0) :

Code :

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

1
2
3
4
5
6
7
 
if(jQuery.support.opacity) {
      $(selector).show().fadeTo(1000, 1);
}
else {
      $(selector).show().fadeTo(1, 1);
}

marche bien.

[g_escande]

Slt hérode j'ai pas bien compris ton astuce tu peu m'expliquer?

[Herode]

Ce n'est pas vraiment une astuce : jQuery a déclaré obsolète les anciennes prodécures d'identification de navigateur (est-ce que tel objet existe ou pas, souvent...) et utilise à la place, - si j'ai bien compris - des procédures identifiant la présence ou non de certaines fonctionnalités. C'est plus portable cross browser, donc certainement meilleur et plus propre.

Dans cette optique, le seul test effectué est :

Code :

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

if(jQuery.support.opacity)

Si le navigateur passe le test, tu n'auras pas de problème avec les effets de transparence et tu utilises à fons les show(delay), fadeIn(delay), etc. Si le test renvoie false, le navigateur gère mal - ou pas du tout - la transparence et tu adaptes ton code. En l'occurrence, IE6 et 7 ne passent pas le test. IE8 non plus je crois, mais à vérifier.

[danielhagnoul]

Bonjour.

Il faut utiliser $(window).load() et non $(window).ready()

La nouvelle documentation sur l’API jQuery 1.4 est très claire sur ce point.

L’événement ready est exclusivement destiné à l’usage suivant :

Code :

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

$(document).ready(function(){…});

ou

Code :

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

$(fonction(){…});

dans sa forme abrégée.

Pour window nous devons, et nous aurions déjà dû sous jQuery 1.3.2, utilisez l’événement load :

Code :

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

$(window).load(fonction(){…});

Il n’y a pas de forme abrégée.