Aplicar opacidad con jQuery

02/Abr/2012 jQuery , , 3 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


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

3 comentarios en “Aplicar opacidad con jQuery”

Víctor Cuervo

Gonzalo

¡Buen aporte! Aunque cabe señalar que esto sería extensible a aplicar cualquier otra propiedad CSS para añadir o modificar por medio de jQuery. Además, también sirve para leer el estado de una propiedad. Algo para lo que yo uso mucho el método CSS en un click handler es para mostrar/ocultar elementos por medio de la propiedad display.

$(document).ready(function(){
$(“#opacidad”).click(function(e){
if($(“#logo”).css(“display”) != none) $(“#logo”).css(“display”, “none”);
else $(“#logo”).css(“display”, “block”);
});
});

También se puede encadenar con otros métodos para añadir animaciones (como el fade) y hacer que el objeto vaya desapareciendo progresivamente.

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

*


*