Question

I have a div called #footer, whose margin is animated using jQuery to slide it up when a user hovers over it. Inside #footer is a div called #toggle, which animates the footer back down again when clicked.

It all works fine except that when #toggle is clicked and #footer has animated back down, if I move the mouse it triggers the hover again, even though the mouse isn’t over #footer anymore. It’s driving me crazy!

Here’s the jQuery:

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

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

What I need I think is to unbind the hover event when it’s done, and rebind it when #toggle is clicked. Maybe? But I can’t figure out how to make it work.

Answer 1

You should probably use the mouseenter event instead of hover.

Using hover with a single argument will trigger the function on both mouseenter and mouseleave.

hover( handlerInOut(eventObject) )