Efecto para cambio en display:none a block

[locoxchacho]

Buenas noches!

Yo estoy realizando un codigo donde, al hacer clic en un link, el CSS de un elemento cambia de display:none a display:block. La cosa es que ese cambio es como muy "brusco", que digamos... yo necesetaria como que ese cambio de display sucediera con algun efecto de transicion, o de slide de izquierda a derecha, de ser posble.. Saben si eso puede ser posible???

O sino... saber si alguno conocia algun tipo de acordion, o efecto slide de alguna galeria, donde se al hacer clic en un link se abra un contenido adyacente a este, de izquierda a derecha?

muchas gracias!!

pablo.

[zyon]

Que tal, no lo he hecho, pero aqui mismo me sugirieron que podrias hacer una funcion utilizando un setTimeOut ciclado para ir asignandole dinamicamente un tamaño de menor a mayor a tu objeto que haras visible o invisible... no se si eso te ayude a darte una idea.. espero que si Saludos!

[ClubIce]

var movpx = 0;
function inicia {
if (movpx!=100) {
setTimeout ("mueve()",1)
movpx++
}
}

function mueve () {
nombreobjeto.style.left = movpx + "px"
inicia()
}
inica()

--------------------------------------------------------------------------------------------------------------------------

con este pequeño script puedes hacer que se muva a la derecha 100px. si quieres se mueva a la izquierda solo emves de aumentar al movepx disminuyele. Recuerda que el mposition del obajeto a ,çmover deve ser absolute

[locoxchacho]

ok, muchas gracias por sus respuestas!!!!

pero disculpen la ignorancias.... como hago para apicarlo?? debo poner en onclick alguna de las funciones?? mueve() ??...

desde ya, muchas gracias!!

un saludo!

Pablo.

[zyon]

Que onda! bueno, en realidad ese escript se ejecutara en cuanto se cargue tu pagina ya que esta mandando a llamarse la funcion desde la parte de script, pero si lo necesitas controlar desde una accion, coloca la funcion inicia() en donde la necesites, y me parece que el codigo de Clubce ( Saludos !! ) tiene un ligerito error almenos que a mi se me escape algo :P, entonces seria:

var movpx = 0;
function inicia() { // Aqui faltaban los parentecis
if (movpx!=100) {
setTimeOut ("mueve()",1)//Aqui 1000 = 1 segundo
movpx++
}
}

function mueve () {
nombreobjeto.style.left = movpx + "px"
inicia()
}

//inicia() Aqui es donde se ejecuta ñla funcion, se comenta para que no se ejecute
// y en su lugar la mandas a llamar desde algun evento ( onclick, onblur, etc... )

[locoxchacho]

muchas gracias por la aclaracion!! ya habia agregado los parentesis, pues me parecia extraño que no esten. Asique ya funciona. Lo que no logro, es que al poner 1000 en el segundo parametro de setTimeOut, no me toma como milisegundos, sino que si pongo 1000 creo que tarda todos esos segundos. Y al poner 1 , no tarda 1 segundo.. sino que mas...

Subo el ejemplo para que vean cuanto tarda: http://www.ictsolutions.com.ar/dbk/final02.html#

Como se podria hacer para que vaya mas rapido??

Siguiendo con este ejemplo, mi idea seria que si se movio ya para la izquierda, se mueva para la derecha, y si no se movio, bueno.. que se mueva para la izquierda.. intente hacer algo con el else del if, pero no logre nada.. algun consejo??


Y por ultimo, pero no mas importante (de hecho, creo que lo mas importante), es como tengo que aplicar esto a mi idea...

Esta bien, el efecto de moverse lo tengo. Ahora necesito que pase de display:block a none, y vicecersa. Pero si esta abierto, y le aplico es display:none, desapareceria el bloque, por lo que el efecto no serviria de nada.. como puedo lograr ese efecto???

Desde ya muchas gracias, si me pueden ayudar, la verdad, que estarán salvando mi futuro laboral!!!

Un saludo para todos, y gracias por anticipado..

cualquier cosa que no entienda, estare aqui para resolver dudas.. abrazo!

[zyon]

A no entendi tu liga, como ejecutamos el ejemplo? y bueno estas seguro que pusiste mil? si no checa la sintaxis en internet, para que lo corrobores, y tu puedes manipular la propiedad de display, exactamemente no entioendo lo que necesitas hacer :S pero si se que cualquier accion la puedes controlar (document.getElementById('tuObjeto').style.display =...) tu puedes checar en que momentos debera desaparecer y en cuales no con validaciones...

[locoxchacho]

lo que tengo que haces es una especia de menu, donde al apretar en un boton, se abre a su lado el contenido de su submenu. Un tipo de slide horizontal. Al hacer clic en otro, se cierra el abierto, y se abre el que se hizo click.

Hice este codigo que mas o menos sirve, pero con pensar que solo este sirve para cerra una pestaña, pienso que todo el codigo del menu (son 8 pestañas) va a pesar mucho...

Código:

function staff_fuera() {
setTimeout ("cuatro()",0);
setTimeout ("tres()",50);
setTimeout ("dos()",100);
setTimeout ("uno()",150);
setTimeout ("cero()",200);
}

function cuatro () {
document.getElementById('prueba').style.width = "400px";
}
function tres () {
document.getElementById('prueba').style.width = "300px";
}
function dos () {
document.getElementById('prueba').style.width = "200px";
}
function uno () {
document.getElementById('prueba').style.width = "100px";
}
function cero () {
document.getElementById('prueba').style.width = "0";
}

Que me dicen?? voy por el camino correcto?? o me estoy complicando demasiado, dando muchas vueltas? se podria simplificar de otra manera??

muchas gracias nuevamente, un saludo!!

pablo.

[ClubIce]

JEJEJEJEJE Gracias zyon por corregir mi error la proxima vez tebndre mas cuidado

[zyon]

Hola, me parece que te complicas, podrias hacer una sola funcion, donde le mandes de parametro el objeto que quieres activar ( tu pestaña ) entonces ya detectado el objeto en un ciclo vas aumentando el tamaño gradualmente de la capa de la pestaña cubriendo la que ya esta abierta y a la vez manejar la propiedad z-index para asegurarte que se sibreponga sobre lo que ya se visualiza, y no importara si le dan clic a una pestaña q ya esta abierta, no se si me explique :P

[locoxchacho]

mmm.. no, no entiendo bien.. mas que nada porque soy nuevo en esto de javascript...

aparte, si cada boton cambia segun el estado (por decir, cuando esta apretado y cuando no, son distintos)... eso como se podria hacer??

la verdad, si me podrias ayudar con el codigo, mostrarme a que te refieres con un ejemplo, o algo por el estilo, la verdad me vendria muy bien...

www.dbkonline.info/preve

Eso es lo que hice con MI metodo. Por supuesto que hice un monton de lineas de codigo, seguramente, muchas de ellas inecesarias. Sería posible lograr todos los "efectos" que hago en mi ejemplo, con la solucion que dices tu??

Desde ya, muchas gracias! Espero tu colaboracion! :)

pablo

[zyon]

Halo, a que te refieres con estado? en que cuando esta seleccionado o no seleccionado lucen distintos? Si es eso es tambien simple, como veo manejas lo que son imagenes, podrias tambien con JS hacer que al seleccionar una opción sustituir la imagen original por otra que por ejemplo tenga de fondo un color mas oscuro que los demas o algo asi, cualquier cosa para resaltar la opción ( document.getElementById('tuImg').src='DireccionImg Resaltada'; ) a por desgracia estoy super atorado en algo y no tengo el chance de hacer un ejemplo, pero lo que tienes si funciona puedes dejarlo asi, si despues no lo has intentado mejorar o algo pues ya hare un ejemplito, me seriviria a mi igual por que no lo he hecho, pero por mientras ya que no sabes JS busca en gogle, hay muchisima informacion :P Slaudos!!

[locoxchacho]

claro... me refiero a que si estan seleccionados, algunos lucen distintos...

de hecho, el efecto esta en el ejemplo que puse (el sitio web).. pero lo que pasa con mi codigo es que esta repleto de funciones, son 800 lineas de codigo que seguramente se podrian simplificar con el bucle que hablas, pero no tengo idea como hacerlo...

realmente, no tengo apuros, porque con este codigo "artesanal" pude salir del aprieto en que estaba, pero de todas formas si cuando puedas, haces un ejemplo parecido al mio pero de la forma que tu dices, la verdad que te agradecería muchisimo, pues seria mucho mas facil de modificar si el cliente pide alguna modificacion.... seguro, mas facil que buscar en 800 lineas de codigo...

espero que puedas ayudarme, todo a su tiempo, pero de todas formas te estaré agradecido...

y si ves que estas atareado por mucho tiempo (digamos.. mas de 2 semanas!)... no me recomendarias que funciones de JS buscar en google, o mostrarme algun ejemplo que haya colgado en la web para ir investigando e ir probando por mi cuenta??


desde ya, muchas gracias por tu ayuda!!!

un saludo!!

pablo.