Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: stopniowe opacity w menu
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
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
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 smile.gif),
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
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.