Aplicar efecto Fade a una página web con jQuery

Se trata de un efecto interesante que podemos aplicar a nuestro sitio web ó páginas que deseemos. Nos referimos al efecto Fade (comumente se relaciona con desvanecer ó aparecer ciertos contenidos) que se puede lograr gracias a jQuery.

Dentro de un contenedor <div> colocaremos el contenido al cual aplicaremos el efecto:

<div id="micontenido" style="display:none;">
    <!--aca tu contenido. asegurate que sea extenso para que puedas ver el efecto-->
</div>

Nada más después de cerrar el contenedor </div> escribe el siguiente código JavaScript:

<script type="text/javascript">
$(document).ready(function(){
  $(document).ready(function () {
    $('#micontenido').fadeIn(1200);
  });
});
</script>

Obviamente debemos referenciar en la cabecera del documento HTML a la librería jQuery.

Vía wdlog | Nuestro ejemplo

Comentarios Comentarios formato RSS

  1. avatar Ricardo 2010-08-02 08:54:18 6 Escelente ejemplo, pero será posible realizar el mísmo efecto desde negro hasta aparecer
  2. avatar Fernando 2010-05-11 12:11:30 5 gracias!
  3. avatar jesusvld 2009-11-24 21:30:27 4 mmmm... ó podria ser una imagen load tipo facebook cuando carga para mostrar una foto.

    Todo queda a criterio del desarrollador.
  4. avatar ale 2009-11-24 16:25:47 3 Buen ejemplo. El problema radica en que si la pagina tiene algunas imagenes o tiene algún tipo de contenido pesado, el efecto no queda muy bien ya que despues del efecto se siguen cargando las imagenes y asi se arruina el efecto en sí.
    Estaría bueno, añadirle una precarga :-)

    Saludos
  5. avatar alejo 2009-06-08 18:48:51 2 Gracias, de mucha utilidad!
  6. avatar gonzalo meza 2008-11-25 10:44:37 1 Hola. Gracias por tus ejemplos. He estado aplicando el ejemplo de registro ajax-php-mysql, combinado con algunas validaciones.

    Tengo una duda que no he sabido como enfrentarla, y te solicito si tu me puedes orientar. Me gustaria que al realizar el registro envie un mensaje de "datos guardados". Hasta ahora consigo que lo haga (como el ejemplo de actualizacion), pero me gustaria aplicar un efecto fadeIn para mostrarlo, y que luego de algunos segundos desaparezca este mensaje...

    He tratado con JQuery, con fadeIn...pero no se donde incluir el script.

    Agradecido desde ya

Dejar un comentario