javascript - JQuery悬停事件处理程序运行太多次

Question

这个问题已经有答案了:

mouseover function occurring multiple times in a queue (2 个回答)

已关闭 7 年前。

我有一个在鼠标悬停时激活的下拉菜单。它有一个动画，需要 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/