如何中断 Hover 的 handlerOut

Question

我有以下情况：

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

这是我正在使用的代码。

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

如何告诉 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 添加一个悬停处理程序来停止当前动画，然后根据需要显示或隐藏 info 元素。由于我们已经有一个处理程序可以执行此操作，因此您只需将 #info 选择器添加到悬停调用即可：

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

这是一个 工作 jsfiddle

Answer 2

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

$("#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/

<a href="javasctipt:" class="hoverNav" target="info">
    show info
</a>

<div id="info" class="hoverNavDescription">
Iam info text
</div>






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