Efecto fade transición en jquery

Vamos a ver un ejemplo sencillo de jquery para hacer un rollover de efecto transparencia en nuestras fotos.

Creamos una nueva función, y aplicamos la función “fadeTo” al 0.3 en estado reposo (30% de opacidad) y al pasar el ratón por encima aplicamos a la foto el 1 (100% de opacidad):

$(document).ready(function () {
  $(".fadefoto").fadeTo(1, 0.3);
  $(".fadefoto").hover(
    function () {
      $(this).fadeTo("fast", 1);
    },
    function () {
      $(this).fadeTo("normal", 0.3);
    }
  );
});

Y dentro del body de nuestra página, solo tenemos que aplicar el estilo que antes hemos creado para el efecto, en nuestro caso: “fadefoto” a la/s fotos que queremos aplicar el efecto de transparencia.

<a><img class="fadefoto" src="mifoto.jpg" /></a>