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

[skowron-line]

no to moze pokaz co sam napisales i my ci wskarzemy blad a nie "napiszcie mi"

[MitS]

ok wiec probowalem tego typu patenty:

Kod

function changeColorMenu(id, show){
    var menu     = document.getElementById("m"+id);
    var time     = 2;
    
    if(show == 1){
        if(time < 10){
            menu.style.backgroundColor = "#0c1125";
            menu.style.opacity    = '1.0' + time;
            menu.style.filter        = "Alpha(Opacity=" + time + "100)";
        
            time += 2;
            setTimeout(changeColorMenu, 0, true);
        }
    }
    else{
        if(time != 0){
            menu.style.backgroundColor = "#f7f7f7";
            menu.style.opacity= '0.' + time;
            menu.style.filter="Alpha(Opacity=" + time + "0)";
            
            time -= 2;
            setTimeout(changeColorMenu, 10, true);
        }
    }
}

niestety nie udało mi się otrzymać zamierzonego efektu ...

[zbig]

Przede wszystkim wyrzuc zmienna time przed funkcje bo z kazdym wywolaniem funkcji twoja zmienna ma taka sama wartosc,
po drugie na wszelki wypadek nadaj jej jakas normalniejsza nazwe, time w wielu jezykach jest nazwa zastrzezona( ale w js niekoniecznie ),
no i wartosc timeout (0?) w setTimeout nie wiem co miales na mysli
Mozesz rowniez uzyc gotowe efecty Effect.Appear i Effect.Fade ze scriptaculousa tutaj link