Efecto FadeIn en una imagen al cargar una página

Citar

Escrito el 05 Jun 2010 05:58 am

Buenas noches....
Soy novato en esto del jQuery y bueno, necesito un poco de orientación.

He podido implementar un código (sin jQuery) para hacer un efecto fadein en una imágen al cargar la página. Esta página es mostrada en otra por medio de un iframe. Sin embargo el código es muy burdo, pues el efecto sale muy "tartamudeado".

Luego encontré un código con jquery.cycle.all.2.74.js para poder mostrar una serie de banners con el efecto fade, y noté que es de lejos mucho más fluido. He tratado de entender (en la documentación de jQuery) como poder usar el fadein pero la verdad no he logrado nada. No se si tiene que ver que la página index tiene referencia a jQuery y la página que cargo en el iframe también.

¿Cómo puedo implementar el efecto fadein?. Admito que tengo la mente como mazamorra pues son varias horas de trabajo y seguro que la solución es simple pero no logro encontrarla.

De verdad agradezco desde ya el apoyo que me puedan brindar.
Un saludo desde Lima, Perú

Por freesoftwarrior

1 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 12 Jul 2010 01:10 am

Primeramente hola y no te desesperes yo también soy nuevo en jquery pero no es ningún bicho de siete cabezas.
En la documentación del mismo se encuentra bastante info y si no hablas ingles siempre se puede traducir precariamente con google traductor......

He comentado el código para que lo entienda mas fácilmente.

Código HTML :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>fadeIn al abrir pagina</title>
<!--Esto siempre viene antes del script, o sea, la libreria jquery-->
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
/*
Siempre que se inicializa jquery se debe de hacer de esta forma
El $(document).ready(nombre de la funcion); o la propria 
funcion en si como en este caso, sirven para indicar que el documento
esta cargado en el DOM.
*/
$(document).ready(function(){
/*
El simbolo del dolar $ sirve para indicar que vamos a tratar
de algun elemento antes designado con un identificador o una clase
Y va por el mismo palo que el css como #id .class 
ejemplo $("#d1") o si fuera una clase $(".d1")
Hojo las comillas son inportantes...

Una vez echo esto si queremos que este elemento haga un fadeIn
deberiamos de ocultarlo previamente con hide();
Y luego de esto hacer el fadeIn y mostrarlo con show();
*/
$("#d1").hide();
$("#d1").fadeIn("slow").show();
});
</script>
<style type="text/css">
#d1{ width:100px; height:100px; background:#660;}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>

Veras que este ejemplo hace esto que querías al cargar la pagina el div hará un fadeIn.
Es importante enfatizar que jquery trabaja en conjunto com el css.
Y que la mayoría de los efectos si no todos dependen del css.

Espero haberte ayudado cualquier duda dime.....

Por fininhop

18 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 13 Jul 2010 12:29 pm

Hola otra vez

Aqui te dejo un enlace a un tutorial básico de jquery que ha postulado Lunatic Lycanthrop aqui mismo en cristalab en la parte de tutoriales.

Esta muy bien explicado el uso de jquery....

Saludos...

Por fininhop

18 de clabLevel

Envíale un mensaje privado

Efecto FadeIn en una imagen al cargar una página

Escribe una respuesta rapida