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');
            });
        }); 
    });
});

这是我现在所拥有的一个有效例子 - ＆gt; http://jsfiddle.net/jumplikeaginger/6pzjh4sn/

Answer 1

也将hoverout添加到stop :(

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');
                });
            });

        }); 

});

如何在mouseout上停止jQuery悬停功能队列？

1 个答案: