javascript - 如何在鼠标移出时停止 jQuery 悬停函数队列？

Question

我正在为一家公司构建一个关于部分，他们希望在其中以特定方式显示两张图片和一段简短的个人简介。这个想法是，他们的头像将显示在网格中，当您将鼠标悬停在头像上时，图片会发生变化，然后叠加层会下降，然后他们的简短生物会淡出。一旦鼠标离开该部分，同样的事情就会以相反的顺序发生。

我已经用 jQuery 构建了这个，但是我在函数队列方面遇到了问题。如果您快速将鼠标悬停在图像上，以便鼠标在函数队列完成之前离开该部分，它就会全部崩溃。 (跳转到下面的 jsfiddle 示例，只需将鼠标快速滑过图像即可了解我的意思)。

我尝试过以多种不同的方式使用 .stop() 函数，但都没有成功。这是我第一次遇到这个问题，我还没有发现太多关于这个特定问题的方法，所以我想知道是否有更有效的方法来构建它？任何帮助将不胜感激!

这是我的基本 jQuery

$(document).ready(function(){

$("li.member").hover(function(){
        var thisInHover = this;
        $(thisInHover).find("li.member-monster").stop().fadeIn('slow', function(){
            $(thisInHover).find("li.member-overlay").stop().slideDown('slow', function(){
                $(thisInHover).find("li.member-description").stop().fadeIn('slow');
            });
        });

}, function(){

        var thisInHover = this;

        $(thisInHover).find("li.member-description").fadeOut('slow', function(){
            $(thisInHover).find("li.member-overlay").slideUp('slow', function(){
                $(thisInHover).find("li.member-monster").fadeOut('slow');
            });
        }); 
    });
});

这是我现在拥有的工作示例 --> http://jsfiddle.net/jumplikeaginger/6pzjh4sn/

Answer 1

也将 stop() 添加到 hoverout:

http://jsfiddle.net/6pzjh4sn/1/

$(document).ready(function(){

    $("li.member").hover(function(){
            var thisInHover = this;
            $(thisInHover).find("li.member-monster").stop().fadeIn('slow', function(){
                $(thisInHover).find("li.member-overlay").stop().slideDown('slow', function(){
                    $(thisInHover).find("li.member-description").stop().fadeIn('slow');
                });
            });

    }, function(){

            var thisInHover = this;

            $(thisInHover).find("li.member-description").stop().fadeOut('slow', function(){
                $(thisInHover).find("li.member-overlay").stop().slideUp('slow', function(){
                    $(thisInHover).find("li.member-monster").stop().fadeOut('slow');
                });
            });

        }); 

});