取消绑定而不是重新绑定

unbind not re-binding

本文关键字：绑定 新绑定 取消      更新时间：2024-03-27

我有以下代码：

$homeSlider.mouseenter(function() {
    console.log('enter');
    $slideInfo.animate({
        'bottom': -slideInfoHeight + 'px'
    });
});
$homeSlider.mouseleave(function() {
    console.log('leave');
    $slideInfo.animate({
        'bottom': '0px'
    });
});
$slideInfo.mouseenter(function() {
    $homeSlider.unbind('mouseenter');
    $homeSlider.unbind('mouseleave');
});
$slideInfo.mouseleave(function() {
    $homeSlider.bind('mouseenter');
    $homeSlider.bind('mouseleave');
})

我的slideinfodiv绝对位于homeSliderdiv的顶部。如果在homeSlider上滚动，slideinfo会隐藏自己（-slideInfoHeight），并在滚动时显示自己。如果将鼠标移动到slideInfodiv上，它将适当地保持可见，并且在展开时保持可见。但是，当您在homeSlider上回滚时，它不再隐藏slideInfo。我做错了什么？

我建议使用变量，而不是连续绑定和解除绑定：

var preventAnimation = false;
$homeSlider.mouseenter(function() {
    if (preventAnimation) return;
    console.log('enter');
    $slideInfo.animate({
        'bottom': -slideInfoHeight + 'px'
    });
});
$homeSlider.mouseleave(function() {
    if (preventAnimation) return;
    console.log('leave');
    $slideInfo.animate({
        'bottom': '0px'
    });
});
$slideInfo.mouseenter(function() {
    preventAnimation = true;
});
$slideInfo.mouseleave(function() {
    preventAnimation = false;
})

此外，您还可以了解.hover()！

相关文章：