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

jquery - unbind不重新绑定

1 个答案: