content top
Cambiar Opacidad con jQuery

Cambiar Opacidad con jQuery

Escrito por Krato en jQuery el 08 de 10 del 2009 | 12 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



12 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?

  5. AdrianaNo Gravatar says:
    febrero 25th, 2012

    thanks for share!

  6. sem calcinhaNo Gravatar says:
    febrero 28th, 2012

    Adoro me mostrar peladinha na web cam

  7. Corinne FryeNo Gravatar says:
    marzo 27th, 2012

    I made a website using joomla and I have a domain and a server, the problem is whenever I go to that domain the site is still unviewable. Does onybody know how to help me out?.

  8. Johnny RoccioNo Gravatar says:
    marzo 28th, 2012

    Hello.. . I would be grateful for advice on creative writing copywright issues.. . When submitting poetry, short stories, novels, or features to publishers and literary agents to consider for publication, is it an idea to protect the copywright?. . If so, what’s the best way to do this?. . Thank you in advance.. . bgscotty.

  9. Rickie MazzoniNo Gravatar says:
    marzo 31st, 2012

    Is there a copyright or anything on content in Youtube videos?

  10. south bronxNo Gravatar says:
    abril 7th, 2012

    I wish to voice my gratitude for your kind-heartedness for people who actually need help with this particular idea. Your very own dedication to getting the message up and down came to be quite practical and have frequently enabled individuals much like me to reach their pursuits. Your informative help and advice entails much a person like me and extremely more to my mates. Best wishes; from everyone of us.

  11. Emery FetteNo Gravatar says:
    abril 19th, 2012

    Myrna, While addressing this issue may be obvious and annoying to you, just look at the growing obesity rate among children and adults and the rise in type II diabetes in both children and adults and you will see why the importance of fruits and vegetables is still addressed. Would you tell the First Lady that her need to discuss this issue is a waste of time because the benefits of fruits and vegetables are so obvious?

  12. xoom wifi onlyNo Gravatar says:
    abril 29th, 2012

    Wohh just what I was looking for, appreciate it for putting up. “If it’s meant to be it’s up to me.” by Terri Gulick.

RSS feed para los comentarios de esta entrada. TrackBack URL

Deja un comentario