CODEWITHSUNDEEP
javascriptjquery
rusly
rusly

Reputation: 1524

mouseenter bubbling when mousehover multiple times

how to prevent bubbling or "out of control" when user hover(mouseenter) multiple times . When user hover i'm using slideDown and slideUp for mouseleave and delay i set 250. I can only fix this if delay i set to 1 ms. Below is my script :

$("#nav li").mouseenter(function (e) {
    e.stopPropagation();
    if (!is_opened) {
        var left = $(this).position().left;
        $(this).children('div').css('left', '-' + left + 'px');
        $(this).children('div').slideDown(delay, function () {
            // Animation complete.
            is_opened = true;
        });
    }

    return false;
});

$("#nav li").mouseleave(function () {

    if (is_opened) {
        $(this).children('div').slideUp(delay, function () {
            // Animation complete.
            is_opened = false;
        });
    } else {
        setTimeout(function () {
            if (is_opened) {
                $('#nav li:first-child').children('div').slideUp(delay, function () {
                    // Animation complete.
                    is_opened = false;
                });

            }
        }, 1000);

    }
    return false;
});

You can check my JsFiddle here

Reproduce a Problem

Upvotes: 0

Views: 153

Answers (1)

Pete
Pete

Reputation: 58422

I think your issue is caused by the is_opened flag and then the animation being run along side changing the left css property

If you change your mouse enter and leave js to the following

   $("#nav li").each(function() {
        //cache vars for better performance
        var li = $(this);
        var left = $(this).position().left;
        var divs = li.children('div');

        //change div left first so it only changes once
        divs.css('left', '-' + left + 'px');

        //do mouse enter and leave stuff
        li.mouseenter(function (e) {
            e.stopPropagation();
            divs.stop(true, true).slideDown(delay);
        });

        li.mouseleave(function () {
            divs.stop().slideUp(delay);
            return false;
        });
    });

it should work: Example

Upvotes: 1

Related Questions