Question

我有以下情况：

我有一个对象，我们称之为“按钮”。当你在Button上移动时，它会让另一个对象“Info”向下滑动。当然，当你的鼠标离开Button时，Info会向上滑动并消失。但是，Info有一个链接，用户可能想要点击它。我可以推迟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");
});

这是working 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;
}

如何中断Hover的handlerOut

3 个答案: