Cambiar Opacidad con jQuery

Escrito por Krato en jQuery el 08 de 10 del 2009 | Una Respuesta

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)

Recordad que podemos usar o la palabra clave jQuery o el dolar $
Elemento -> Elemento a cambiar la opacidad
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: