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!