krótko: css opacity – przezroczystość elementu (javascript, jquery)

  • Mateusz Żeromski    |    2009-03-20    |    Krótko

Artykuł ku pamięci – ciągle zapominam i muszę szukać tej prostej rzeczy, jak będę miał na swoim blogu to nie zapomnę, a jak zapomnę – szybciej odnajdę :). Opisuję tutaj sposoby na uzyskanie przezroczystości elementu poprzez css i javascript (jquery). W pierwszym przypadku jest opisane rozwiązanie kiedy nie uwzględniamy kompatybilności z IE6 (np.: złożony backend). Drugie rozwiązanie – działa pod każdą przeglądarką – wymaga jquery – do zastosować ‘frontendowych’.

Poprzez css

Oczywiście nie działa pod IE6…

1
2
#element{opacity:0.50;filter: alpha(opacity=50); -moz-opacity: 0.5;}
#element:hover{opacity:1;filter: alpha(opacity=100); -moz-opacity: 1;}

Poprzez Javascript (jquery)

Działa wszędzie. Elementy które mają mieć efekt hover oznaczamy klasą .makeHover

1
#element{....}
1
2
3
4
5
$('.makeHover').hover(function(){
    $(this).css('opacity', 1);
},function(){
    $(this).css('opacity', 0.5);
});

Podsumowanie

Tak, teraz o tym nie zapomnę :)

 

Tagi: , , , ,

Komentarze: 9 do “krótko: css opacity – przezroczystość elementu (javascript, jquery)”

  1. 1 snipe     2009-03-20 12:58:04

    a a Prototype robimy to jak napisane na stronie: http://www.prototypejs.org/api/element/setOpacity :)

  2. 2 klisiu     2009-06-01 12:48:13

    Wykorzystałem sposób, który tutaj przedstawiłeś i zauważyłem, że jednak jest mały problem. Na starcie masz obrazek z opacity 1, dopiero po najechaniu kursorem na obrazek załapuje on, że JS nakazuje mu mieć opacity = 0.5. Any ideas?

  3. 3 Mateusz Żeromski     2009-06-01 14:37:02

    hmmmm, ciekawy problem ;)
    U mnie to rozwiązanie działa tak jak powinno.

    Zamień miejscami 0.5 z 1 i będzie ok :)

  4. 4 RofsRowlesopy     2011-04-09 10:09:08

    Free Credit Report

  5. 5 fajne_loginy_sa_juz_zajete     2011-04-12 14:02:24

    a jak rozwiązać problem, gdzie div ma przezroczystość, a w nim jest inny div, który przezroczystości mieć nie powinien?
    wstawiłem w div nadrzędny opacity:0.5 a w ten, który jest w nim opacity:1, ale nic to nie daje: przezroczystość dziedziczy się podrzędnym.

  6. 6 Mateusz Żeromski     2011-04-12 14:48:36

    Hej

    Niestety nie da się tak, ewentualnie mozna wrzucic iframe – wtedy ona nie dziedziczy juz przezroczystości. Tak jest zrobione np na FaceBook, no ale nie jest to dobre rozwiązania.

    Może trzeba by poszukać rozwiazania w html5, canvas itp.

    pzdr.

  7. 7 niefajny_nick     2011-04-28 12:04:17

    „a jak rozwiązać problem, gdzie div ma przezroczystość, a w nim jest inny div, który przezroczystości mieć nie powinien?” – fakt, „nie da się”. Przeźroczystość nawet nie jest tyle dziedziczona co wynika to z logicznego stanu rzeczy: skoro ja jestem w 0.5 przeźroczysty, to moje dzieci też będą widoczne w maks 50% (mając opacity na 1). Jeśli rodzic ma opacity 0.5 i dziecko też 0.5 – to wynik będzie taki że dziecko będzie widoczne w 0.25

    Jest jednen trick który umożliwia rozwiązanie tego problemu – zamiast opacity użyj (pół)przeźroczystego PNG jako tło (choćby 1px x 1px) – i problem znika ;)

  8. 8 Bsky     2012-02-02 18:26:40

    tak na dobrą sprawę to są moje początki z jQuery.

    $(‘.back8′).hover(function(){
    $(this).css(‘opacity’, 1);
    },function(){
    $(this).css(‘opacity’, 0.5);
    });
    mam coś takiego i niestety nie widzę efektu nic.

    Proszę o pomoc

  9. 9 Bsky     2012-02-02 18:27:36

    p.s. dałem znaczniki tutaj od divowo ale je przetrawił formularz

Napisz komentarz


Wersja mobilna