Problema con setTimeout (JS)

[Banditolane]

Buenas:

Estoy tratando de construir una botonera en JS, pero no quiero que se muestre sin estar seguro de que el usuario quiere hacerlo.
Para eso, pongo un setTimeoutl de unos 300ms o 500ms en forma de tiempo de seguridad. Y algo parecido pero con algo más de tiempo para cerrar la botonera. Bueno aquí ya surge el primer problema. Cuando pasa el ratón sobre la botonera, esta espera el tiempo indicado y se activa, a pesar de que uso la función clearTimeout[/B] en el mouseleave. Lo mismo pasa cuando dejo el tiempo de seguridad para que la botonera no se cierre demasiado pronto si el usuario quiere volver a ella. El caso es que tiene un setTimeout "automático" al cargar la página y este si que me permite detenerlo con el primer mouseenter. Este es el código:

Código:

function timeOut() {
	
	$('#botonera').animate({height:20}, "normal");
	$("#btn1").slideUp(700);
	$("#btn2").slideUp(700);
	$("#btn3").slideUp(700);
	$("#btn4").slideUp(700);
				
};
var wait = setTimeout(timeOut, 3000);
			
function timeOut1() {
				
	
	$("#botonera").animate({height:40}, "fast");
	$("#btn1").slideDown(300);
	$("#btn2").slideDown(300);
	$("#btn3").slideDown(300);
	$("#btn4").slideDown(300);
			
};
			
function mostrar() {
			
	$("i").show();
			
};
	
function ocultar() {
			
	$("i").hide();
			
};
			
$('#botonera').mouseenter( function() {
	
	clearTimeout(wait);			
	var wait1 = setTimeout(timeOut1, 500);
	var esp1 = setTimeout(ocultar, 100);
			
});
$('#botonera').mouseleave( function() {
	
	clearTimeout(wait1);			
	var wait = setTimeout(timeOut, 3000);
	var esp = setTimeout(mostrar, 3700);
			
});

He probado varias opciones, como por ejemplo hover y mouseover/mouseout, pero ninguna detiene el setTimeout. Si alguien sabe de qué forma podría conseguir lo que busco....
Soy bastante novato y suelo inventarme todo mi código, por lo que seguro que está lleno de errores de principiante... ¡¡Sé que escribo más de la cuenta!! jajaja

Gracias y un saludo!

[Nemutagk]

No seria mas fácil así....

Código Javascript:

$('#botonera').hover(function() {
$(this).show('slow');
},function() {
$(this).hide('slow');
});
 

Así cuando el usuario pase el mouse sobre la botonera se mostrará, y cuando el usuario quite el mouse de la botonera se ocultará automáticamente, sin estar "adivinando" el tiempo necesario....

[Banditolane]

Pero... una vez que haga hide, ¿como va a volver a hacer el hover? ¿Ya no volvería a verse, no? Además el hover me daba problemas porque interpretaba el mouseout al ponerse sobre las divs de los botones... Y bueno, claro que es más fácil, pero también menos funcional y el efecto menos atractivo también. La idea es que la botonera no se despliegue cada vez que pasa el ratón por encima (lo cual es muy habitual en los desplazamientos del puntero por la web), sino únicamente cuando deje el ratón un cierto tiempo encima. Y lo mismo al cerrarse, que no se cierre inmediatamente después de salir de ella.
De todas formas ya lo he resuelto, sería así:

Código:

var open;
var close;
var show;

function mostrar() {
			
	$("i").show();
		
};

function abrir() {
			   
	$("i").hide();
	$("#botonera").animate({height:40}, "fast");
	$("#btn1").slideDown(300);
	$("#btn2").slideDown(300);
	$("#btn3").slideDown(300);
	$("#btn4").slideDown(300);

};

function cerrar() {
    
	$('#botonera').animate({height:20}, "normal");
	$("#btn1").slideUp(700);
	$("#btn2").slideUp(700);
	$("#btn3").slideUp(700);
	$("#btn4").slideUp(700);
	show = setTimeout(mostrar, 800);
				
};
close = setTimeout(cerrar, 3000);

$('#botonera').mouseenter( function() {
				
	clearTimeout(close); 
	open = setTimeout(abrir, 370);

});
$('#botonera').mouseleave( function() {
				
	clearTimeout(open); 
	close = setTimeout(cerrar, 2500);

});

De todas formas, como ya he dicho, soy bastante novato y sé que escribo mucho para hacer cosas muy simples... pero no conozco otra forma de hacerlo. Para eso pido ayuda!! jajaja. Creo que el problema estaba relacionado con las variables a las que llamaba el clearTimeout.

Gracias y un saludo!

[Nemutagk]

A ver, lo que te di es un ejemplo de uso, no es necesario hacer un "show/hide", puedes hacer un "animation" o incluso llamar a otra función que haga una animación mucho más compleja.... tal y como lo tienes en tu código, solo que con "hover" te desases de código que esta de mas y evitas el uso de variables globales...

El problema que comentas con "hover" sobre los "divs" de los botones es porque esta mal estructurado el código HTML que implementas, incluso el CSS, si el código esta bien no tienes porque tener problemas, yo utilizo "hover" en botoneras, menu's y en general en cualquier elemento que necesito que responda ante las acciones del cursor (mouseover, mouseup, de hecho, JQuery para eso lo implemento)

Lo que indicas sobre dejar un tiempo el cursor encima, con el código que tienes lo único que hace es que tarda en llamar la función abrir y cerrar, sin embargo, si pasas el cursor por encima y de inmediato lo quitas igual llamara la función en 370 milisegundos o 2.5 segundos en el caso de cerrar, es lo mismo que utilizaras un "jquery.delay()" en la función del "hover"

Al final la única diferencia entre el código que tienes es que el que te sugiero tiene menos lineas y te evitas problemas con "setTimeOu"t y variables globales...