stopniowe opacity w menu Opcje

[MitS]

witam wszystki,

mam malutki problem ....
otóż probowalem sobie zrobić na stronie menu, w którym po najechaniu myszą zmienia się kolor.
I oczywiście takie coś zrobiłęm bo to nie problem:

Kod

function changeColorMenu(id, show){
    var menu = document.getElementById("m"+id);
    
    if(show == 1){
        menu.style.backgroundColor = "#0c1125";
    }
    else{            
        menu.style.backgroundColor = "#f7f7f7";
    }
}

menu w htmlu wygląda tak:

Kod

echo '
    <div id="m0" class="menuPosition" onmouseover="changeColorMenu(0, 1)" onmouseout="changeColorMenu(0, 0)">
        <h1>
            menu 1
        </h1>
    </div>
    <div id="m1" class="menuPosition" onmouseover="changeColorMenu(1, 1)" onmouseout="changeColorMenu(1, 0)">
        <h1>
            menu 2
        </h1>
    </div>
    <div id="m2" class="menuPosition" onmouseover="changeColorMenu(2, 1)" onmouseout="changeColorMenu(2, 0)">
        <h1>
            menu 3
        </h1>
    </div>

z tymże szybko takie menu mi się znudziło bo jak zauważyłem jest "zbyt proste" i wpadłem na pomysł by po najechaniu myszy kolor był stopniowo nadawany (czyli od koloru: #f7f7f7 do koloru #0c1125 przechodziło by w ciągu około sekundy). No i niestety wiele prób przeprowadziłem ale niestety wszystko zakończyło się fiaskiem ....

próbowałem z setTimeout i style.filter oraz opacity .... niestety się nie udało ...
chciałem was prosić o napisanie mi jak mógłbym dokonać tego co napisałem wyżej ?

Pozdrawiam

Ten post edytował MitS 1.09.2007, 10:01:48