Animate of mouseenter and mouseleave stop

Question

I'm doing an animation using mouseenter and mouseleave, the problem is that if I pass the mouse over and out quickly on the div, the animation goes insane and like repeating without stoping, how can I fix that, any kind of stop or something?

This is my code:

    /* Footer Hover */
    function footerhover(){
        var footer = $('#footer')
        footer.bind({
            'mouseenter' : function(){
                footer_animate(200);
                footer_bottom(145);
            },
            'mouseleave' : function(){
                footer_bottom(0);
                footer_animate(40);
            }
        })
    }
    function footer_animate(h){
        $('#footer').animate({
            height: h
        }, 50 );
    }
    function footer_bottom(b){
        $('#footer').animate({
            bottom: b
        }, 300 );
    }

Answer 1

It's good practice to use jQuery's stop function to stop the current animation before starting a new one, otherwise they can pile up and fire over and over. So every time you animate the footer, stop it first.

$('#footer').stop().animate({});