Question

我有一个名为#footer的div，当用户将鼠标悬停在其上时，使用jQuery对其边距进行动画处理。内部#footer是名为div的{{1}}，点击后会再次将页脚重新设置为动画。

除了点击#toggle并且#toggle动画后退时，一切正常，如果我移动鼠标它会再次触发悬停，即使鼠标未超过{{1不再了。这让我发疯了！

这是jQuery：

#footer

我需要的是在完成后取消绑定悬停事件，并在单击#footer时重新绑定它。也许？但我无法弄清楚如何让它发挥作用。

Answer 1

您应该使用mouseenter事件代替hover。

将hover与一个参数一起使用会触发mouseenter和mouseleave上的函数。

悬停（handlerInOut（eventObject））

Answer 2

由于您只为hover()事件提供了一个参数，因此mouseenter和mouseleave都会调用该参数。如果您将其更改为使用mouseenter()，则应该可以正常使用。

$('#footer').mouseenter(function(){
    $(this).stop(true, true).animate({"margin-bottom": "0px"}, "slow");
    $('#toggle').addClass('expanded'); 
});

Answer 3

要取消绑定/重新绑定，在其他位置声明匿名函数（并为其命名），然后将其作为参数传递：

function footerHover() {
    $(this).stop(true, true).animate({"margin-bottom": "0px"}, "slow");
    $('#toggle').addClass('expanded');
    $(this).unbind('hover');
}
$('#footer').hover(footerHover);

$('#toggle').click(function(){
    $('#footer').hover(footerHover);
    $('#footer').stop(true, true).animate({"margin-bottom": "-120px"}, "slow");
    $(this).removeClass('expanded');
});

您还可以尝试使用两个函数绑定悬停（因为这是指如何使用悬停）：

$(selector).hover(functionWhileHovering, functionWhenNotHovering);

更具体地说：

$('#footer').hover(function () {
    $(this).stop(true, true).animate({"margin-bottom": "0px"}, "slow");
    $('#toggle').addClass('expanded');
    $(this).unbind('hover');
}, function () {
    $('#footer').stop(true, true).animate({"margin-bottom": "-120px"}, "slow");
    $(this).removeClass('expanded');
});

删除单击的悬停事件，然后再次绑定它

3 个答案: