Fonction générale d'affichage par fondu

[benzen]

Bonjour,

J'aimerais créer une fonction simple permettant d'afficher un objet repéré par son "id" par une transition (fondu entrant).

Voici le code :

function show(id){

document.getElementById(id).style.opacity = '0.0'; // Mise de l'opacité du calque à zéro
document.getElementById(id).style.display = "block"; // Affichage du calque opaque

setTimeout("document.getElementById(id).style.opacity = '0.2'", 400); // Fondu de 2000ms
setTimeout("document.getElementById(id).style.opacity = '0.4'", 800);
setTimeout("document.getElementById(id).style.opacity = '0.6'", 1200);
setTimeout("document.getElementById(id).style.opacity = '0.8'", 1600);
setTimeout("document.getElementById(id).style.opacity = '1.0'", 2000);

}

On suppose bien sur que l'objet à afficher est en display:none à l'origine dans la feuille de style.

Le problème est que la fonction setTimeout ne prend pas en charge l'utilisation de variables

Dans notre cas il s'agit de la variable id qui sert à selectionner l'objet à afficher...

(Une autre solution aurait été d'appeler une fonction par récurrence en incrémentant en même temps une variable (l'opacité), mais cela compliquerait le code et je cherche à trouver une fonction qui pourrait être executée plusieurs fois en même temps, donc l'idée de la fonction avec variable à abandonner.)

J'espère être compréhensible...

Merci.

A+

Benzen.

Modifié 24 Février 2008 par benzen