JS/jQuery - Try to achieve show a div on and off use mouseenter() mouseleave() so not to get repeated animations

Question

So here's my code:

   var timeouts = {};
    $('#nav ul > li').mouseenter(function() {
        clearTimeout(timeouts['menu']);
        $(this).find('div.dropdown').stop(true).slideDown(200);
    });
    $('#nav ul > li').mouseleave(function() {
        timeouts['menu'] = setTimeout(function() {
            $(this).find('div.dropdown').stop(true).slideUp(200);
        }, 1000)
    });

This doesn't seem to be working. Any idea? Is there any other way to achieve my goal? The code now works when I hover my mouse over but the div will not slide up when my mouse leaves.

clear the code inside it and pust just some alert inside mouseenter and mouseleave function and see if its works — coolguy, Jun 20 '12 at 03:15

score 0 · Answer 1 · answered Jun 20 '12 at 03:16

Inside of your anonymous function, this is probably not defined as a HTML element.

Put this in the proper scope:

var timeouts = {'menu': false};

$('#nav ul > li').hover(function() {
    if (timeouts['menu'] !== false) {
      clearTimeout(timeouts['menu']);
    }

    $(this).find('div.dropdown').stop(true).slideDown(200);
}, function() {
    var $this = $(this);

    timeouts['menu'] = setTimeout(function() {
        $this.find('div.dropdown').stop(true).slideUp(200);
    }, 1000)
});

Also, you're probably going to get an error if you try to call timeouts['menu'] without it being defined first. I'd set it to a default value and then check if it exists before using it.

score 0 · Answer 2 · edited May 23 '17 at 12:12

0

You could try the hoverIntent plugin or have a look at some of the solutions here: jQuery if mouse is over for 2 sec. begin animation or don't animate at all

edited May 23 '17 at 12:12

Community

1
1

answered Jun 20 '12 at 03:25

Moin Zaman

25,281
6
70
74

JS/jQuery - Try to achieve show a div on and off use mouseenter() mouseleave() so not to get repeated animations

2 Answers2