javascript - 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/