Fonction de fondu en JavaScript pur

Salut les amis, je veux fondre dans un div lorsque je clique sur un autre div et pour cela j'utilise le code suivant. Code1 fonctionne bien mais j'ai besoin d'utiliser le Code2.

Je sais qu'il y a jQuery mais j'ai besoin de le faire en JavaScript

Pouvez-vous me dire quel genre d'erreur je fais ou ce que je dois changer...

Code1 --- Fonctionne bien

function starter() { fin(); }
function fin()
{
 for (i = 0; i <= 1; i += 0.01)
 {
 i=Math.round(i*100)/100;
 setTimeout("seto(" + i + ")", i * 1000);
 }
}
function seto(opa)
{
 var ele = document.getElementById("div1");
 ele.style.opacity = opa;
}

Code2 --- Ne fonctionne pas

function starter()
{
 var ele = document.getElementById("div1");
 fin(ele);
}
function fin(ele)
{
 for (i = 0; i <= 1; i += 0.01)
 {
 i=Math.round(i*100)/100;
 setTimeout("seto(" + ele + "," + i + ")", i * 1000);
 }
}
function seto(ele,opa)
{
 ele.style.opacity = opa;
}

Solution du problème

Mise à jour : Il semble que les gens apprécient mon approche minimaliste et élégante, mise à jour pour 2022 :

Pas besoin de mécanismes complexes. Utilisez simplement CSS, qui est prêt à l'emploi et offre de meilleures performances globales.

Fondamentalement, vous y parvenez avec CSS en définissant une transition pour l ' opacity. En JavaScript ce serait:

const div = document.querySelector('#my-div');
div.style.transition='opacity 1s';

et en tant que déclencheur, vous venez de définir l'opacité sur 0 :

div.style.opacity=0;

Cela créera un effet de fondu de 1 seconde et vous pourrez utiliser le déclencheur n'importe où. L'inverse peut également être fait pour obtenir un effet de fondu enchaîné.

Voici un exemple de travail :

const div = document.querySelector('#my-div');
div.style.transition='opacity 1s';
// set opacity to 0 -> fade out
setInterval(() => div.style.opacity=0, 1000);
// set opacity to 1 -> fade in
setInterval(() => div.style.opacity=1, 2000);

#my-div { background-color:#FF0000; width:100%; height:100%; padding: 10px; color: #FFF; }

<div id="my-div">Hello!</div>