Ocultar/Mostrar div lateral con efecto sin Jquery, Mototools

closeHola! hace 6 years 10 months 10 days que escribí esta entrada, puede que esta información ya no sea valida en la actualidad, por favor se comprensivo conmigo cuando comentes 🙂

Este es un pequeño script que desarrolle para mostrar y ocultar un div con efecto lateral, muy bueno para menus, el código es el siguiente:

<script>
var p=0.01,t;
var p2=-70,t2;
var estado=”visible”;
var w_t;
function om(obj,w){
if(estado==”visible”){
estado=”oculto”;
p=0.01;
ocultar(obj,w);
}else{
estado=”visible”;
p2=w*-1;
mostrar(obj,w);
}
}
function ocultar(obj,w){
w_t=w;
if(p<(w*-1)){
clearTimeout(t);
return;
}
p-=5;
obj.style.left=p+’px’;
t=setTimeout( function(){ ocultar(obj,w_t) },30 ); }
function mostrar(obj,w){
w_t=w;
if(p2>-10){
clearTimeout(t2);
return;
}
p2=p2+5;
obj.style.left=p2+’px’;
t2=setTimeout( function(){ mostrar(obj,w_t) },30 ); }
</script>
Para llamar el script podemos usar:
onclick=”om(this,50)”
donde 50: es el ancho del div.

Ver Ejemplo
Espero que les sea de utilidad.

You may also like...

2 Responses

  1. Claudio dice:

    Si tengo dos div uno a la Izquierda y Uno a la Derecha…. y quiero ocultar cada uno por separado uno hacia la derecha y otro hacia la izquierda…

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *