CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jon Hendershot
Jon Hendershot

Reputation: 476

How do I stop a jQuery hover function queue on mouseout?

I'm building out an about section for a company where they want two images and a short bio to display in a certain manner. The idea is that their headshots will be displayed in a grid and when you hover over a headshot the picture will change and then an overlay will drop down followed by their short bio fading on. Once the mouse leaves the section, the same thing happens in a reversed sequence.

I've built this with jQuery, but I'm having issues with the function queue. If you hover over the image quickly so that the mouse leaves the section before the function queue completes it gets all whacked out. (Hop on the jsfiddle example below and just run your mouse across the image quickly to see what I mean).

I've tried using the .stop() function a number of different ways, but with no success. This is the first time I'm running into this issue and I haven't found much in the way of this specific issue, so I'm wondering if there's a more efficient way to build this? Any help would be greatly appreciated!

Here's my basic 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');
            });
        }); 
    });
});

And here's a working example of what I have right now --> http://jsfiddle.net/jumplikeaginger/6pzjh4sn/

Upvotes: 0

Views: 162

Answers (1)

LorDex
LorDex

Reputation: 2636

add stop() to hoverout as well:

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

        }); 

});

Upvotes: 2

Related Questions