Aplicar opacidad con jQuery

02/abr/2012 jQuery , , 4 Comentarios
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.

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

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

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

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.

  1. $("#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.

Vídeos sobre jQuery

Ningún video coincide

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

4 comentarios en “Aplicar opacidad con jQuery”

Víctor Cuervo

Víctor Cuervo

@Alvaro Carneiro,

Cierto, esa es otra opción. Teníamos intención de explicarla en la web. 😀

Víctor Cuervo

Álvaro Carneiro

También se puede usar $.animate para hacer el efecto, la ventaja de hacerlo así que con $.fade(In|Out) es que puedes especificar el nivel de opacidad y es perfecto para hacer efecto hover en imágenes

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*


*