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);
}
);
});
$(".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.