feed twitter facebook LinkedIn facebook

jQuery » Efecto Fade en jQuery

marzo 30, 2012 por Víctor Cuervo 5 Comentarios Imprimir Imprimir

Utilizando jQuery podemos crear de una forma muy sencilla efectos de Fade, es decir, ocultar o mostrar un elemento de forma gradual. Para poder realizar un efecto de Fade en jQuery utilizaremos los métodos .FadeOut() y .FadeIn().

Pero lo primero será poner un elemento sobre el que aplicar el efecto Fade. En nuestro caso utilizaremos una imagen.

  1. <img src="contenido.png" alt="logo" id="logo"/>

Ahora ponemos los enlaces para ocultar y mostrar:

  1. <a href="#" id="ocultar">Ocultar</a> | <a href="#" id="mostrar">Mostrar</a>

Lo que haremos ahora será poner el código jQuery que controle el evento onclick sobre estos enlaces. Para poder hacer esto necesitamos el método click sobre los enlaces.

  1. $("#mostrar").click(function(e){
  2. // Efecto Fade
  3. });

Ya solo nos quedará el ejecutar los efecto con los métodos .FadeOut() y .FadeIn().

  1. $("#ocultar").click(function(e){
  2. $("#logo").fadeOut();
  3. });
  4. $("#mostrar").click(function(e){
  5. $("#logo").fadeIn();
  6. });

Si queremos podemos configurar el tiempo en el cual realizamos el efecto del face. Para ello pasaremos el tiempo, en milisegundos, a las funciones .FadeOut() y .FadeIn().

  1. $("#ocultar").click(function(e){
  2. $("#logo").fadeOut(2000);
  3. });
  4. $("#mostrar").click(function(e){
  5. $("#logo").fadeIn(2000);
  6. });

Algo sencillo realizar un efecto de fade en 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:

5 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

  1. Mith
    abril 1, 2012 #

    Quizá lo único que le falta es un ejemplo en vivo ^^

  2. Víctor Cuervo
    abril 1, 2012 #

    @Mith,
    Lo tienes en el botón de visualizar. :-D
    La URL del ejemplo es http://lineadecodigo.com/wp-content/uploads/2012/03/efecto-fade.html

    Espero que te guste.

  3. m++
    mayo 17, 2013 #

    Hola, sabés como se puede lograr un efecto de fadeout sobre las imagenes que no tengo seleccionadas..para decirlo mas claro: necesito que al hacer rollover sobre una imagen, me baje la opacidad de una tira de imagenes, que van a estar en div contenedor..Desde ya, muchas gracias, si tienes algun tutorial o ejemplo de aplicacion para ese efecto..

Deja un comentario

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

*