Aplicar opacidad con jQuery

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.

Crear la Imagen y el Enlace

La idea será partir de una imagen y un enlace que nos permita aplicar la opacidad:

<img src="contenido.png" alt="logo" id="logo"/>
<br>
<a href="#" id="opacidad">Opacidad</a>

Capturar el Evento Click

Lo siguiente será capturar el evento click sobre ese enlace:

$(document).ready(function(){
  $("#opacidad").click(function(e){
    //Código de cambio de opacidad
  });
});

Modificar la Propiedad CSS Opacity

Y es que será en el evento click donde 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);

Valores de Opacidad

Es importante saber que los valores de la opacidad varían entre 0.0 y 1.0.

Ahora, cuando pulsemos sobre el enlace, aplicaremos la opacidad sobre la imagen habiendo utilizado jQuery.