content top
Cambiar Opacidad con jQuery

Cambiar Opacidad con jQuery

Escrito por Krato en jQuery el 08 de 10 del 2009 | 4 respuestas

Con el framework jquery podemos aparte derelaizar cosas como slideshows, tabs (como ya hemos visto), juegos etc, podemos por ejemplo cambiar las propiedades de nuestro css.

En éste caso vamos a ver como podemos cambiar la opacidad de una image, un div o cualquier elemento del html de nuestra página. Y para ello, aparte de llamar al framework de jQuery, deberemos usar la siguiente sintaxis.

jQuery('elemento').css("opacity", valor)
  1. Recordad que podemos usar o la palabra clave jQuery o el dolar $
  2. Elemento -> Elemento a cambiar la opacidad
  3. Valor _> EL valor que quermos darle. 0 significa que elemento tiene la opacidad al 0% y 1 que la tiene al 100%

En este ejemplo cambiaríamos la opacidad de todos las imágenes de nuestro html

jQuery('img').css("opacity", 0.7)

Pero si queremos que qude un poco más profesional, podemos por ejemplo jugar con las imágenes de nuestro html para que cuando estemos sobre ellas en vez de cambiar la opacidad de un modo brusco podemos usar el evento fadeTo para hacerlo de un modo más suave.

Pongamos un ejemplo:

jQuery(“img”).hover(function(){
jQuery(this).fadeTo(“slow”, 1.0); // Cambia la opacidad al 100 %
},function(){
jQuery(this).fadeTo(“slow”, 0.5); // Cambia la opacidad al 50% cuando el ya no  tiene el foco
});
jQuery("img").hover(function(){
 
    jQuery(this).fadeTo("slow", 1.0); // Cambia la opacidad al 100 %
 
 },function(){
 
    jQuery(this).fadeTo("slow", 0.5); // Cambia la opacidad al 50% cuando
                                  // ya no tiene el foco
});

Este ejemplo hará que  todas las ímagenes de nuestro html cambien a opacidad 100% cuando estemos sobre alguna de ellas y cuando no cambiará al 50% y todo ello de como si fuera un efecto de transición.

Y ahora os toca jugar a vosotros :bye_tb:

Os dejo un ejemplo simple para descargar y podais ver el efecto.

Opacidad con jQuery



4 comentarios »

  1. luiaNo Gravatar says:
    marzo 5th, 2010

    Gracias!!! parece muy sencillo de la manera que lo explicas espero que subas más tutos de jQuery!!!Saludos XD

  2. royNo Gravatar says:
    noviembre 8th, 2011

    gracias

  3. private jet charterNo Gravatar says:
    enero 20th, 2012

    Very interesting info !Perfect just what I was looking for!

  4. power washingNo Gravatar says:
    enero 25th, 2012

    Thanks for the auspicious writeup. It if truth be told was once a entertainment account it. Glance complicated to more added agreeable from you! However, how could we keep in touch?

RSS feed para los comentarios de esta entrada. TrackBack URL

Deja un comentario