feed twitter facebook LinkedIn facebook

jQuery » Aplicar opacidad con jQuery

abril 2, 2012 por Víctor Cuervo 4 Comentarios Imprimir Imprimir

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.

Visualizar el Codigo
Visualiza el artículo
Descargar el Codigo
Descargar el código
Error en el Codigo
Error en el código
Foro sobre jQuery
Foro sobre jQuery
tags: , ,

Artículos relacionados:

4 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

  1. Álvaro Carneiro
    abril 3, 2012 #

    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

  2. Víctor Cuervo
    abril 3, 2012 #

    @Alvaro Carneiro,

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

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*