Cet article s'appuie sur le script de brainerror.net, Cross-browser BlendTrans Filter JavaScript.

L'envie vous prend de rendre un des éléments de votre page transparent ? Vous avez une subite envie de faire un fondu sur une image ? Vous souhaitez pouvoir choisir l'opacité d'un élément ? Oui je sais, moi aussi.

Pour faire varier l'opacité en CSS, il existe 4 techniques, les 4 ne fonctionnent pas partout, il faut donc jongler avec en attendant que les navigateurs respectent tous les même normes.

opacity: 0.5;
Le technique officielle du W3C, elle ne fonctionne que sous Mozilla Firefox.
-moz-opacity: 0.5;
Celle ci fonctionne sur les anciennes versions de Mozilla et Phoenix/FireBird/FireFox.
-khtml-opacity: 0.5;
Celle ci est la méthode des navigateur utilisant le moteur KHTML (Konquerer sous Linux et Safari sur MacOS).
filter: alpha(opacity=50);
Et pour finir, la méthode a utiliser sur MSIE (elle ne marche QUE chez lui).

On va donc créer une fonction qui modifiera ces 4 paramètres, cela nous garantira un fonctionnement sur tous les navigateurs graphique de moins de 7 ans LOL
Ce qu'on veut c'est faire un fondu, il faut donc aussi définir le temps de fusion.
On va juste faire un appel à une fonction du style
opacity('IDdiv', 100, 0, 500) ou :
IDdiv = l'attribut ID de l'élément à modifier,
100 = l'opacité de dépars (0-100),
0 = l'opacité d'arrivée (0-100),
500 = Temps du fondu en millisecondes, 500 correspond à 0.5 seconde.

Maintenant une fonction qui sait changer l'opacité chez tous le monde :

function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}

C'est super simple, on lui donne une opacité et un ID, et elle le transmet en CSS à l'élément. La gros du boulot, c'est de créer les appels à cette fonction, il faut lancer une boucle !

function opacity(id, opacStart, opacEnd, millisec) {
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;

Ici on initialise nos valeurs, pour 500 millisecondes, on aura un coefficient de vitesse de 5, qui sera multiplié par le temps (qui varie donc).

if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
}

Voici enfin la boucle finale, on détermine le sens de variation du fondu (disparition ou apparition ?), et on lance une boucle for.
Celle ci utilise la fonction native setTimeout pour lancer un appel à notre fonction changeOpac() en variant l'opacité à chaque boucle, et ce de plus en plus lentement.
Il n'y a pas grand chose d'autre à expliquer, comme je suis sympathique je vous offre un exemple ici,
pour télécharger le code source et voir d'autres exemple de fonctionnement de ce script, je vous renvoie vers le site de l'auteur originel, en Anglais.

Je suis très content d'avoir trouvé ce script, je voulais vous le faire partager car les exemple de fondu en Français sont trop rare a mon goût, et faut avouer que ça rox quand même ! 8-)