Evitar que se repita evento hover jquery

iuconlas · #1 (**permalink**) 22/06/2010, 05:20

Hola,

Tengo unas opciones de menú que muestran un texto informativo cuando el ratón se sitúa encima y desaparece cuando el ratón sale. Lo he hecho a través del evento hover de jquery. Me gustaría evitar que si el ratón sale y entra muchas veces sobre la opción de menú se este repetiendo (el mostrar y ocultar el texto informativo) tantas veces como lo haya hecho.

Código Javascript:

Ver original$('#opcion_password').hover(
 
   function() { $('#hint_menu_superior').html('Te ayudamos a recuperar tu password'); $('#hint_menu_superior').slideDown(); },
 
   function() { $('#hint_menu_superior').slideUp();}
 
);

Código HTML:

Ver original.
.
<a href="#" class="opcion_menu_superior" id="opcion_password">&iquest;Olvidaste tu password?</a>
.
.
<div id="hint_menu_superior"></div>

Gracias por cualquier aporte!

Banditolane · #2 (**permalink**) 22/06/2010, 08:49

Vale mira. Yo no tengo mucha experiencia pero esos errores me molestan muchísimo. Lo que has de hacer es aplicar un setTimeout y clearTimeout en el hover, de manera que reconoce el evento solo una vez dentro de ese periodo de tiempo. El caso es que de esta manera se evita eso:

Código:

// PRIMERO CREAS LAS FUNCIONES

function A() {
	$('#hint_menu_superior').html('Te ayudamos a recuperar tu password');
	$('#hint_menu_superior').slideDown();
};

function B() {
	$('#hint_menu_superior').slideUp();
};

// Y AHORA LAS APLICAS EN EL HOVER

$('#opcion_password').hover( function() { 
	clearTimeout(funcionB);
	funcionA = setTimeout(A, 300);
},function() {
	clearTimeout(funcionA);
	funcionB = setTimeout(B, 700);
});

Además así evitarás también que se abran sin querer a la hora de desplazarte por la página.
Bueno, espero que te ayude, es una solución muy simple. Si alguien conoce otra que no deje de hacer su aporte.

Un Saludo!

Banditolane · #3 (**permalink**) 22/06/2010, 09:04

Vale, aquí tienes una alternativa. Andaba buscando algo similar lo que pasa que mi problema era que a la hora de crear las funciones no podía utilizar el "this" xk no me lo reconocía, aunque yo en tu caso emplearía la solución que te he dado 1º, la veo más completa. Esta es la otra opción:

Código:

$('#opcion_password').hover( function() {
	
	$('#hint_menu_superior').stop(true).html('Te ayudamos a recuperar tu password');
	$('#hint_menu_superior').stop(true).slideDown();

},function() {
	
	$('#hint_menu_superior').empty();
	$('#hint_menu_superior').stop(true).slideUp();

});

Es tan simple como eso. Yo me veo obligado a utilizarlo por el momento hasta que solucione el tema del $(this), a ver si soy capaz. Pero ya te digo, a mi la 1ª opción me parece más completa. Tu decides.

Un Saludo!

iuconlas · #4 (**permalink**) 22/06/2010, 10:55

Banditolane eres un crack o como dicen x mi tierra eres lo puto amo!!

Sinceramente no esperaba una respuesta con mi solución exacta porque la verdad sea dicha creo que no se explicarme bien.

Muchas gracias!!

Banditolane · #5 (**permalink**) 22/06/2010, 11:32

De nada tio!!
Encantao de ayudar!!!Para eso está esta hermosa comunidad, para ayudar y ser ayudado!!

Un Saludo!

P.D. --> Yo no veo ke te explikes mal... ;)

Dany_s · #6 (**permalink**) 22/06/2010, 18:38

Cita:

Iniciado por Banditolane

Código:

$('#opcion_password').hover( function() {
	
	$('#hint_menu_superior').stop(true).html('Te ayudamos a recuperar tu password');
	$('#hint_menu_superior').stop(true).slideDown();

},function() {
	
	$('#hint_menu_superior').empty();
	$('#hint_menu_superior').stop(true).slideUp();

});

El problema que tienes ahí es que que al hacer el mouseout cuando el slide está al 50% va a quedar con una altura del 50% por el stop y al volver a entrar va a quedar cortado.

Hice uno usando animate modificando el alto y para que cuando hagan mouseout y esté por la mitad se cierre desde ese lugar y no tenga que terminar :), tiene un delay para que no se muestre si se pasa el cursor rapidamente al estar navegando.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>

$( function (){
    $('#opcion_password').hover( function (){
        $("#hint_menu_superior").delay(500).animate({height:'100px'}, 1000);
    },
    function (){
        $("#hint_menu_superior").stop(true).animate({height:'0px'}, 1000);
    });
});
</script>
    <style>
        #hint_menu_superior{height:0px; width:250px; background:red; overflow:hidden }
    </style>
  </head>
<body>
<a href="#" class="opcion_menu_superior" id="opcion_password">&iquest;Olvidaste tu password?</a>
<div id="hint_menu_superior">Te ayudamos a recuperar tu password</div>
</body>
</html>

el método delay está disponible desde jquery 1.4 si usan una versión anterior se puede usar un animate con algo que no se modifica como opacidad al 100% jeje

iuconlas · #7 (**permalink**) 23/06/2010, 04:11

Gracias por tu aportación también Dany_s