Dziś przyszedł czas na odrobinę jQuery. Pokażę Wam efekt płynnej zmiany przezroczystości np. obrazka po najechaniu na niego myszką. Skrypt ma jedynie kilka linijek, więc bardzo nie obciąża strony. Aby efekt zadziałał, musimy mieć zainstalowaną bibliotekę jQuery. Można pobrać ją tutaj.

Dodajemy więc do sekcji head następujący fragment kodu:

Code block

<script type='text/javascript' src='jquery.js'></script>
<script type="text/javascript">
$(document).ready(function() {
   $(".opacity").fadeTo("normal", .5);
   $(".opacity").hover(function(){
      $(this).fadeTo("normal", 1);
   },
   function(){
      $(this).fadeTo("normal", .5);
   });
});
</script>

W miejscu, gdzie jest „.opacity” znajduje się powiązanie z odpowiednimi elementami na stronie. W obecnej postaci, efekt zadziała we wszystkich elementach z class=”opacity”. Można skorzystać też z dzieci i potomków znanych z CSS np. jeśli we fragmencie w head damy: „div#Obrazki img”, to efekt zadziała na wszystkich znacznikach IMG w DIV-ie o id=”Obrazki”.

Trzy fragmenty typu: fadeTo(„normal”, .5) odpowiadają za zmianę stanu. Normal oznacza normalną prędkość przejścia. W to miejsce można wpisać slow, normal, fast lub wartość numeryczną. „.5″ oznacza procent przezroczystości np. .5=50%, .2=20%, 1=100%.

Zobacz demo!