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: 3 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 :)

Napisz komentarz