Desvanecer DIV y mostrar otro

[[NiRVaNa]]

Buenas gente del foro, estoy queriendo hacer algo y nose por donde empezar.

Paso a comentarles. Es para una pagina donde se muestran ofertas de productos. La cantidad de ofertas puede variar, dependiendo de la carga de las mismas.

YO hago una consulta a la base de datos, traigo la informacion necesaria, y lo acomodo todo dentro de un div por cada producto, es decir que si hay 3 productos, se generan 3 divs.

Ahora bien, con la finalidad de hacer un efecto que llame la atencion, queria hacer que muesrte el primer div, luego de cierto tiempo se desvanezca y muestre el siguiente, y asi sucesivamente segun la cantidad de ofertas que haya. Y que al llegar al ultimo vuelva al primero. Tambien, que cuando el usuario se posicione dentro del div, se detenga la "transicion".

Yo quiero hacer esto sin usar ajax, porque la verdad que todavia no tengo idea de como usar esa tecnica. Lo que pensaba es que se haga un rewrite de una parte del documento cada cierto tiempo. Pero es todo en teoria. Nose como llevarlo a la practica.

Alguien me podria dar una mano para empezar con esto. Muchas Gracias...

[[NiRVaNa]]

........... up

[David]

Lo que puedes hacer es mostrar un div y ocultar los demás. Hacer esto cada determinado tiempo usando setInterval.

[[NiRVaNa]]

Pero con esto todavia no soluciona todo lo que necesito hacer. Lo que mas me interesa es el efecto de transicion...

Pero es util tu respuesta, haria una parte de lo que necesito... alguna otra sugerencia?

[David]

¿Qué efecto de transición específicamente quieres hacer?. Por ejemplo, puedes ir achicando el div anterior y agrandando el otro. Se verá interesante.

[[NiRVaNa]]

Era un desvanecimiento... Pasar de un "alfa = 0" a un "alfa = 100" y nuevamente a un "alfa = 0"

Pero eso que me comentas tambien seria interesante. Lo que implique menos trabajo... En la pagina de www.getfirefox.com se ve el efecto del que hablo, al hacer cambio de pestañas...

Pero que se haga automaticamente cada cierto tiempo (puedo usar la funcion que me propusiste) y que se detenga cuando haga un mouseover...

[David]

No he visto el efecto que mencionas (quizás sea porque ya está tarde ) .

Tal vez una captura sería de ayuda.

Bueno, si te interesa puedo ayudarte con el código que te dije.

P.S.: Quizás en este caso sea mejor setTimeOut, hacemos sucesivas llamadas a esa función hasta que se produzca el onmouseover.

[[NiRVaNa]]

El efecto se encuentra en esa pagina que comente...
Hay un titulo: "¿Qué es lo fantástico de Firefox?" y debajo tiene unos links, y al hacer click en ellos es donde se produce el efecto, no puedo hacer una captura, porque el desvanecimiento es muy rapido...

Tambien quiero decirte que cuando se haga un mouseout siga cambiando los divs...

PD: Leyendo sobre setTimeOut, lo que tendria que hacer es que se ejecute una y otra vez, hasta que se haga el mouseover, y cuando se haga el mouseout que se empiece a ejecutar nuevamente...?

[David]

Ya he logrado ver el efecto es bastante interesante, aunque yo no sé cómo se hace. Quizás alguien más experto puede ayudarte .

Para la otra pregunta, mi idea es tener una función que haga el efecto, luego, dentro de esa función pones setTimeOut para llamarse a sí mismo y continuar el efecto, ese setTimeOut lo pones dentro de un if con una variable, ¿para qué?. Para que cuando tengamos el onmouseover cambiemos el valor de esa variable y detengamos el efecto. Luego, en el onmouseout volvemos a llamar a setTimeOut y continuamos el efecto.

Espero no haber sido confuso.

Saludos

[[NiRVaNa]]

Para nada, se entiende... por ahora estoy solo con la teoria, al momento de la practica seguramente estare preguntando mas :P

Ahora solo resta esperar a algun experto en javascript que pueda ayudarme... Gracias

[Un_Tico]

Mmmm... es interesante lo que comentan y estaría bien hacer un lab de como hacerlo en javascript pero...

¿No seria más simple hacerlo con algún Framework que con puro javascript?

Porque no usas algún framework y aprendes de una vez a usar estas herramientas tan útiles, vas a ver que después de aprender tus sites ya no serán los mismos...

Saludos...

[[NiRVaNa]]

Mucho mejor si es con un framework (ya que ahorro trabajo ^^) Pero no conozco alguno que haga eso que quiero hacer... Creo que la parte mas complicada seria lo del efecto de transicion... Si se puede hacer con un framework y conoces alguno que haga eso, bienvenido sea...

Salu2

[Un_Tico]

Claro, personalmente yo uso jquery(por la costumbre jeje) pero mootools tiene mayor cantidad de métodos para efectos, si te decides por jquery, te recomiendo que empieces a ver los métodos de animate, fadeIn, fadeOut,hide,show creo que con esos te basta para hacer lo que quieres.

Si empiezas y te pegas en el desarrollo, aqui estamos para ayudar...

Saludos...

[capitanquartz]

Mozilla usa una libreria usada YUI de Yahoo! para hacer ese efecto.

Aqui te lo dejo. He sacado el codigo que hace el efecto. Sustituye lo que quieras y reza por que mozilla no se te enfade XD

http://www.megaupload.com/?d=V44KQDCE