javascript - jquery - 取消绑定不重新绑定

Question

我有以下代码：

$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');
})

我的 slideinfo div 绝对位于 homeSlider div 部分的顶部。如果您滚动 homeSlider，slideInfo 会隐藏自己 (-slideInfoHeight)，并在您滚动时显示自己。如果您将鼠标移到 slideInfo div 上，它会适当地保持可见，并且在您推出时保持可见。但是，当您回滚 homeSlider 时，它不再隐藏 slideInfo。我究竟做错了什么？

Answer 1

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

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()！