JQuery hover event handler running too many times

Question

I have a dropdown menu that activates on mouse hover. It has a animation which takes 200ms to finish and 200ms again if you take your mouse off for it to reset back.

If you run your mouse over the dropdown and off really fast for 10 seconds for example and then move your mouse away the dropdown will constantly dropdown and back up until it has done it as many times as your mouse was on the dropdown.

Does anyone know how I can fix this?

var dropdown = function() {
    $('.dropdown').hover(function() {
        $('.inbutton').animate({
            top: '-188px'
        }, 200);
        $('.dr2button').animate({
            top: '0px'
        }, 200);
    }, function() {
        $('.inbutton').animate({
            top: '-122px'
        }, 200);
        $('.dr2button').animate({
            top: '-61px'
        }, 200);
    });
};


$(document).ready(dropdown);

Answer 1

Preppend the stop() function to animate()

    $('.inbutton').stop().animate({
        top: '-122px'
    }, 200);

Make this in all animate functions.

More info:

https://api.jquery.com/stop/