Menu con opciones de apertura horizontal

Poliformado · #1 (**permalink**) 19/10/2012, 02:30

Hola a todos, estoy aprendiendo Javascript y después de leer un par de libros actuales de JS, más ojear las diferentes webs de ejemplos me he puesto manos a la obra para empezar a probar cosas, el siguiente script tiene la intención de hacer crecer y decrecer una barra en horizontal para menús en vertical, se que estará hecho en muchos sitios, pero el caso es que hago esto para resolver curiosidades como la siguiente.

El script falla cuando paso demasiado rápido el ratón por encima, el efecto que da cuando hago eso es que la barra se queda congelada y tiende a querer hacer las dos funciones a la vez a pesar de no estar el ratón encima, tiene un onmouseover y un onmouseout para las dos opciones de crecimiento y decrecimiento.

Estoy buscando algún diferenciador para que no haga las dos opciones al mismo tiempo, sobre esta linea he encontrado que se puede usar onmouseover y onmouseout en el script directamente, pero no entiendo mucho su modo de empleo, he buscado todo el día de ayer por google, pero la información que aparece es compleja o esta poco documentada por lo que me generan demasiadas dudas de "por que" o confusión.

Código:

<html>

<head>

<script type="text/javascript">

function tamano(){
					
// Crea la variable tamano y los punteros de las funciones
					
var tamano = 100;
					
this.avance = fnAvance;
					
this.desavance = fnDesavance;
					
       // fnAvance amplia la barra hasta 200 px
					
              function fnAvance(){
							
                         if (tamano < 200){

                              var recarga = setTimeout('miTamano.avance()', 0);
								
                              tamano = tamano + 2;
								
                                      if (tamano > 200){
								
                                                tamano = 200;
								
                                      }
								
                              document.getElementById('boton').style.width = tamano;

                              document.getElementById('boton').innerHTML = tamano;

                          }
							
                 }
						
           // fnAvance decrece la barra hasta 100 px	
						
                      function fnDesavance(){
						
                              if (tamano > 100){

                                      setTimeout('miTamano.desavance()', 0);

                                      tamano = tamano - 2;
								
                                           if (tamano < 100){
									
                                                   tamano = 100;
									
                                           }

                              document.getElementById('boton').style.width = tamano;

                              document.getElementById('boton').innerHTML = tamano;
								
                              }
		
                       }
				
              }

var miTamano = new tamano();

</script>

	</head>
			
		<body>
			<div id="boton" onmouseover="miTamano.avance();" onmouseout="miTamano.desavance();" style="border-style: solid; width: 100px; height: 20px; border-width:1px;"></div>
	        </body>
</html>

Bueno, ojala que alguien me pueda ayudar un poco con esto, al menos alguna referencia por la que seguir investigando.

Un saludo. ^^

IsaBelM · #2 (**permalink**) 19/10/2012, 07:42

has de limpiar el temporizador antes de iniciar otro. esto se hace con clearTimeout() o clearInterval().

por otro lado el segundo temporizador no lo tienes asignado a una variable y las variables han de ser globales para poder tener acceso a ellas desde las funciones privadas

marlanga · #3 (**permalink**) 19/10/2012, 11:27

Si el efecto no es demasiado complicado, se puede (y se recomienda) hacerlo con CSS3:

http://jsfiddle.net/marlanga/xRgkQ/1/

Creo que el internet explorer 10 ya se lo traga. Chrome, Opera y Firefox sin problemas.