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.
![logo](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)
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.