CODEWITHSUNDEEP
javascriptfunctiondelay
TJP
TJP

Reputation: 43

I want to add a delay to my javascript function but dont know how

I am working with a menu and a multiple submenus. When you hover over a menu item, the submenu should appear, when you take your mouse off it should disappear. While this works i want the mouseout function to have a delay and I have tried multiple methods but i cant seem to get it to work.

PLEASE NOTE: The reason why I am using a mouseout function and not fadeToggle is because I have multiple items that can be hovered over. So if i move my mouse from menhuitem-1 to menuitem-2 i want that one to appear over it and vice versa.

This is my code (it works but i want a delay on mouseout):

$(function(){
 $("#menuitem-1").hover(function( e ){
  $("#subitem-1").stop().toggle().css('z-index', '1000');
 });
});
$(function(){
 $("#menuitem-1").mouseout(function( e ){
  $("#subitem-1").stop().css('z-index', '1');
 });
});

Upvotes: 0

Views: 92

Answers (4)

ewein
ewein

Reputation: 2735

Maybe try something like this:

$(function(){
    var elem = $("#subitem-1");
    var menuitem = $("#menuitem-1");
    var timeout;
    menuitem.hover(function( e ){
        clearTimeout(timeout);
        elem.stop().toggle().css('z-index', '1000');
    });

    menuitem.mouseout(function( e ){
        timeout = setTimeout(function(){
            elem.stop().css('z-index', '1');
        }, 3000);
    });
});

Upvotes: 1

Halcyon
Halcyon

Reputation: 57721

It's important to cancel the timer when you hover back over or the item or the item will hide regardless of whether you hover back.

Using a timer:

function create_timer(callback, timeout) {
    var timer = null;
    return {
        start: function () {
            timer = setTimeout(function () {
                timer = null;
                callback();
            }, timeout);
        },
        cancel: function () {
            if (timer !== null) {
                clearTimeout(timer);
                timer = null;
            }
        }
    };
}

Now you can do:

$(function(){
    var timer = create_timer(500, function () {
        $("#subitem-1").stop().css('z-index', '1');
    });
    $("#menuitem-1").mouseover(function( e ){
        $("#subitem-1").stop().toggle().css('z-index', '1000');
        timer.cancel();
    });
    $("#menuitem-1").mouseout(function( e ){
        timer.start();
    });
});

Upvotes: 0

uiTeam324
uiTeam324

Reputation: 1245

 var delay=1000, setTimeoutConst;
$("#menuitem-1").hover(function( e ){
      setTimeoutConst = setTimeout(function(){
            //do something
        }, delay);
function(){
     clearTimeout(setTimeoutConst );
  });

Hope this will help you.

Upvotes: 0

Aliweb
Aliweb

Reputation: 1951

Try something like this:

$(function(){
 $("#menuitem-1").hover(function( e ){
  $("#subitem-1").stop().toggle().css('z-index', '1000');
 });

 $("#menuitem-1").mouseout(function( e ){
      setTimeout(function(){
         $("#subitem-1").stop().css('z-index', '1');
      }, 1000);
 });
});

For more info: Javascript timing events

Upvotes: 0

Related Questions