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. 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>

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 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);

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.

Publicaciones relacionadas:

Modificar el estilo con jQuery Peticiones AJAX con jQuery Modificar el contenido de una capa con jQuery Detectar texto seleccionado con jQuery Seleccionar el texto de un campo