JQuery 悬停事件处理程序 运行 次数过多

Question

我有一个在鼠标悬停时激活的下拉菜单。它有一个动画，需要 200 毫秒才能完成，如果您将鼠标移开以重新设置，则需要 200 毫秒。

如果您 运行 将鼠标悬停在下拉菜单上并快速离开例如 10 秒，然后将鼠标移开，下拉菜单将不断下拉并返回，直到完成与您一样多的次数鼠标在下拉菜单上。

有谁知道我该如何解决这个问题？

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

将 stop() 函数添加到 animate()

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

在所有的动画函数中做这个。

更多信息：

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