Discussion :

[defacta]

Salut,

J'ai un petit soucis de fonts après avoir appliqué une fonction qui permet d'afficher progressivement un DID avec opacity.

Voici le résultat:
Avant le fade:

Après le fade:


Alors la div est toute simple:

Code :

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

1
2
3
<div style="width:100%;" id="message_74">
...le texte..
</div>

Je ne peux pas mettre de background dans cette DIV car elle est à l'intérieur d'une plus grande div avec un background général.

Ensuite pour le Javascript, il est basique:

Code :

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

1
2
3
4
5
6
7
8
function setOpacity(level) {
  elFad.style.opacity = level;
}
function fadeIn(){
 for (i = 0; i <= 1; i += (1 / steps)) {
    setTimeout("setOpacity(" + i + ")", i * duration);
  }
}

Il n'y a pas de soucis au niveau du JavaScript, il est bien exécuté et avec Firefox il n'y a pas de soucis au niveau des fontes.

Mais Safari ou Chrome, les fontes s'affichent mal après application du fadeIn().

Vous savez comment palier à ce soucis de fontes quand on change l'opacity d'un DIV dynamiquement en JavaScript ?

Merci.

[Bovino]

Il n'y a pas de soucis au niveau du JavaScript

Si quand même un peu, parce que ta fonction fadeIn() n'est pas très propre...
Enclencher toute une série de setTimeout dans une boucle for n'est pas la meilleure option, d'autant que la précision est assez aléatoire pour des durées inférieures à 25ms.

Mais surtout, il ne faut pas oublier, à la fin de l'animation, de remettre la div à la valeur finale souhaitée de l'opacité, dans ton cas, il y a fort à parier que la dernière valeur affectée soit légèrement inférieure à 1 ce qui provoque l'affichage fautif.

[defacta]

Bien vu, ca finit à 0.95 !
Ce script, je l'ai trouvé ici:
http://www.ninthavenue.com.au/blog/j...t-fade-effects
Je l'ai apprécié parce qu’il est simple, court et facile à adapter, avec une fonction fadeIn et une fadeOut, c'est tout ce dont j'avais besoin...

Maintenant si quelqu'un connait une autre script dans le même style avec un fadeIn et un fadeOut, je suis preneur
Sinon, je sens le if > 0.9 alors on met 1, lol !!!

Merci pour ton aide.

[SpaceFrog]

J'ai également rencontré des soucis de fadeIn avec des fonts bold principalement sous IE
J'ai countourné en ajoutant une couleur de fond au div fadé ...
mais cela ne repond pas à tous les besoins