如何中断Hover的处理程序输出 [英] How to interrupt a Hover's handlerOut

问题描述

我有以下情况：

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

这是我正在使用的代码。

  $（＃button）。hover（function（）{
 $（＃info）。slideDown（fast）; 
}，function（）{// handlerOut 
 $（＃info）。delay（1000）.slideUp（fast）; 
}）; 
  

$ b

解决方案

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

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

  $（＃button）。hover（ function（）{
 $（＃info）。stop（true，true）.slideDown（fast）; 
}，function（）{// handlerOut 
 $ #info）。stop（true，true）.delay（1000）.slideUp（fast）; 
}）; 
  

然后，要获得您想要的行为，我们需要将悬停处理程序添加到 #info 即停止当前动画，然后根据情况显示或隐藏info元素。由于我们已经有了一个处理程序，所以您可以将 #info 选择器添加到悬停调用中：

  $（＃button，#info）。hover（function（）{
 $（＃info）。stop（true，true）.slideDown fast）; 
}，function（）{// handlerOut 
 $（＃info）。stop（true，true）.delay（1000）.slideUp（fast）; 
}）; 
  

以下是工作jsfiddle

I have the following situation:

I have an object, lets call it "Button". When you mouese over Button it make another object "Info" slide down. Of course, when your mouse leaves Button, Info slides up and dissapear. But, Info has a link and the user might want to click it. I can delay the Info's slide up but I can't stop it after I reach Info.

This is the code I'm using.

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

How can I tell Button not to slideUp Info after I hover it?

解决方案

You can use stop() to stop any currently queued animation. Note that stop() stops any currently running animation wherever it currently is, so in this case we'll need to stop the animation and show the element.

(As an aside, before solving the behaviour issue, you might already want to use stop() to prevent bouncing effects if the user mouses in and out of the button very quickly):

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

Then, to get the behaviour you want, we need to add a hover handler to #info that stops the current animation, and then either shows or hides the info element, as appropriate. Since we've already got a handler that does that, you can just add the #info selector to the hover call:

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

Here's a working jsfiddle

这篇关于如何中断Hover的处理程序输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！