Question

I have the following code:

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

My slideinfo div is absolutely positioned over the top of part of the homeSlider div. If you roll over the homeSlider, the slideInfo hides itself (-slideInfoHeight), and shows itself when you roll out. If you move your mouse over the slideInfo div, it appropriately stays visible, and stays visible when you roll out. But then, when you roll back over the homeSlider, it does not hide the slideInfo any longer. What am I doing wrong?

Answer 1

I’d recommend the use of a variable instead of continouus binding and unbinding:

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

Also, you might have a look into .hover()!