如何中断Hover的handlerOut

我有以下情况：

我有一个对象，我们称之为“按钮”。 当你在Button上移动时，它会使另一个对象“Info”向下滑动。 当然，当你的鼠标离开Button时，Info会向上滑动并消失。 但是，Info有一个链接，用户可能想要点击它。 我可以延迟Info的上滑，但是在我到达Info后我无法阻止它。

这是我正在使用的代码。

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

在hover它之后，如何告诉Button不要滑动信息？

Answer 1

您可以使用stop()来停止任何当前排队的动画。 请注意， stop()停止当前正在运行的任何动画，因此在这种情况下，我们需要停止动画并显示元素。

（另外，在解决行为问题之前，如果用户非常快速地进出按钮，您可能已经想要使用stop()来防止弹跳效果）：

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

然后，为了获得您想要的行为，我们需要向#info添加一个hover处理程序来停止当前动画，然后根据需要显示或隐藏info元素。 由于我们已经有了一个处理程序来执行该操作，因此您只需将#info选择器添加到hover调用：

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

这是一个有效的jsfiddle

Answer 2

这个问题的通常解决方案是在相关元素隐藏之前设置延迟，如果用户在延迟期间hover该元素，则完全取消隐藏。

 $("#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) ); }); 

演示http://jsfiddle.net/gaby/VjLM2/

Answer 3

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; }