Truc: una transició entre imatges amb jQuery

Un amic de la casa, Scmute, que és l’impulsor del netlabel i l’associació Tecnonucleo i webmaster dels respectius llocs web, aprofitant que està remodelant les pàgines, em passa aquest truc per a fer transicions entre dues imatges.

És un exemple del localitzador  de jquery  i de com es poden tocar les propietats css dels elements directament. Com a detall, indicar que la propietat d’opacitat es declara dos cops, una per a navegadors IE i l’altre per a la resta. Però després es referencien de forma única des del javascript . El jQuery n’encapsula l’accés.

Vet aquí el codi:

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <script src="jquery-1.8.2.js"></script>
        <style>
            .p{
                height:198px;
                width:198px;
                cursor:pointer;
                opacity: 1;
            }
            .c{
                height:198px;
                width:198px;
                cursor:pointer;
                filter: alpha(opacity=0);
                opacity: 0;
            }
        </style>
    </head>
    <body>
        <div class="p" style="background-image: url('imatge1.jpg')"/>
        <div class="c" style="background-image: url('imatge2.jpg')"/>
        <script>
            $(".c").hover(
                function(){
                    $(this).stop().animate({"opacity":0.9});
                },
                function(){
                    $(this).stop().animate({"opacity":0});
            });
        </script>
    </body>
</html>

Si voleu veure el truc en acció, mireu aquest enllaç.