Cómo interrumpir el controlador de un Hover’s

Tengo la siguiente situación:

Tengo un objeto, llamémoslo “Button”. Cuando hace clic en el botón, el objeto “Info” se desliza hacia abajo. Por supuesto, cuando el mouse deja el botón, la información se desliza hacia arriba y desaparece. Pero, Info tiene un enlace y el usuario puede querer hacer clic en él. Puedo retrasar el deslizamiento de la información hacia arriba, pero no puedo detenerla después de alcanzar la información.

Este es el código que estoy usando.

$("#button").hover(function(){ $("#info").slideDown("fast"); }, function(){ //the handlerOut $("#info").delay(1000).slideUp("fast"); }); 

¿Cómo puedo decirle a Button que no deslice la información después de haberla movido?

Puede usar stop() para detener cualquier animación actualmente en cola. Tenga en cuenta que stop() detiene cualquier animación actualmente en ejecución dondequiera que esté, por lo que en este caso tendremos que detener la animación y mostrar el elemento.

(Aparte de eso, antes de resolver el problema de comportamiento, es posible que ya desee utilizar stop() para evitar efectos de rebote si el usuario activa y desactiva el botón rápidamente):

 $("#button").hover(function(){ $("#info").stop(true,true).slideDown("fast"); }, function(){ //the handlerOut $("#info").stop(true,true).delay(1000).slideUp("fast"); }); 

Luego, para obtener el comportamiento que desea, necesitamos agregar un manejador #info a #info que detenga la animación actual, y luego muestra u oculta el elemento de información, según corresponda. Como ya tenemos un manejador que hace eso, solo puede agregar el selector #info a la llamada #info :

 $("#button, #info").hover(function(){ $("#info").stop(true,true).slideDown("fast"); }, function(){ //the handlerOut $("#info").stop(true,true).delay(1000).slideUp("fast"); }); 

Aquí hay un jsfiddle de trabajo.

La solución habitual a este problema es establecer un retraso antes de que el elemento relacionado se oculte también, y si el usuario mantiene ese elemento durante el retraso, cancelar la ocultación por completo.

 $("#button").hover(function(){ $("#info").slideDown("fast"); }, function(){ //the handlerOut $('#info').data('timeout', setTimeout(function(){ $("#info").slideUp("fast"); },1000) ); }); $('#info').hover(function(){ clearTimeout( $(this).data('timeout') ); // cancel the delayed code execution }, function(){ //the handlerOut $(this).data('timeout', setTimeout(function(){ $("#info").slideUp("fast"); },1000) ); }); 

Demostración en http://jsfiddle.net/gaby/VjLM2/

http://jsfiddle.net/

  show info  
Iam info text
var curVisible=""; jQuery(function(){ jQuery('.hoverNav').bind('mouseover',function(){ var elm=jQuery(this), targetName=elm.attr('target') ; curVisible=targetName; jQuery('#'+targetName).slideDown(); jQuery(window).bind('click',handleMouseOut) }); function handleMouseOut(e) { if($(e.target).attr('id')!=curVisible) { jQuery('#'+curVisible).slideUp(); curVisible=""; jQuery(window).unbind(handleMouseOut); } }

});

 .hoverNavDescription { display:none; background-color:red; height:100px; width:100px; }