Question

I’m very new to Javascript, and I’m trying to set a delay on some drop down menus. I have jQuery loaded and am currently using the delay method. However, I did some looking around and it seems like there’s no way to cancel the timer with delay, which means that I end up with a bunch of uncollapsed dropdowns.

How do I set this up so that I can set a delay and have it cancel on mouseout?

Here’s my code (note that the $$’s are for jQuery noconflict):

$$(function(){
    $$('#custommenu>div.menu').mouseover(function(){
    $$('#custommenu>div.menu').removeClass('active');               
    $$('#popup'+$$(this).attr('id').replace('menu','')).delay(500).slideDown(100);
    });

    $$('#custommenu>div.menu').mouseout(function(){
    $$('#custommenu .wp-custom-menu-popup').hide();

    });

    $$('#custommenu .wp-custom-menu-popup').mouseout(function(){
    $$('#custommenu>div.menu').removeClass('active');
    $$('#custommenu .wp-custom-menu-popup').hide();
    });

    $$('#custommenu .wp-custom-menu-popup').mouseover(function(){
    $$('#menu'+$$(this).attr('id').replace('popup','')).addClass('active');
    $$(this).show();
    });
});

Answer 1

Try adding $('#custommenu .wp-custom-menu-popup').stop(true, true) on mouseout, before you call .hide(). This should clear the active queue of animations, and hopefully skip all delays.