jQuery nos permite modificar la opacidad de los elementos con una gran facilidad. Ya lo vimos haciendo un efecto de Fade.
Pero ahora vamos a algo más sencillo, simplemente vamos a aplicar un cambio de opacidad de una imagen con jQuery. La idea será partir de una imagen y un enlace que nos permita aplicar la opacidad.
Opacidad
Lo siguiente será capturar el evento click sobre ese enlace:
$(document).ready(function(){
$("#opacidad").click(function(e){
//Código de cambio de opacidad
});
});
Y es que será en el evento click dónde aplicaremos el cambio de opacidad. El cambio de opacidad se consigue modificando la propiedad opacity de CSS. Para ello vamos a utilizar el método .css de jQuery.
$("#logo").css("opacity", 0.2);
Es importante saber que los valores de la opacidad varian entre 0.0 y 1.0.
Ahora cuando pulsemos sobre el enlace aplicaremos la opacidad sobre la imagen habiendo utilizado jQuery.