Stopniowy setTimeout Opcje

[dark_root]

Witam,
mam taki problem. Próbuję zrobić, aby pewen element na stronie zmieniał swoje opacity o 0.1 i w rezultacie, żeby wyszedł taki efekt stopniowego pojawiania się. Chciałem do tego użyć funkcji setTimeout.
Niestety nie uzyskuje pożądanego efektu, lecz następuje jedynie pojedyncza zmiana z 0 na 1 bez stanów przejściowych. Poniżej mój kod:

Kod

    <script>
        function opacity(){
        for (i=0;i<=10;i++){    
setTimeout("opacityn()",1250);
}
    }
    function opacityn(){
    
var x=parseFloat(document.getElementById('active').style.opacity);
x=x+0.1;
document.getElementById('active').style.opacity = x;
    }
    </script>

Jak należy go zmodyfikować, aby uzyskać wspomniany efekt?