add delay to this jquery on hover

Question

I'm using this code:

var timeout    = 500;
var closetimer = 0;
var ddmenuitem = 0;

function navBar_open()
{  navBar_canceltimer();
   navBar_close();
   ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function navBar_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function navBar_timer()
{  closetimer = window.setTimeout(navBar_close, timeout);}

function navBar_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $('#navBar > li').bind('mouseover', navBar_open) //mouseover
   $('#navBar > li').bind('mouseout',  navBar_timer)}); //mouseout

document.onclick = navBar_close;

which works fine

what i'd like to do is add a delay to the mouseover event

i'll be honest, I found this code on another site and don't completely understand how it works.

I get that when the user mouses out, the navBar_timer function is called, which adds some kind of delay before the dropdown menu is hidden again, but i don't quite see how to implement a hover on the mouseover.

any guidance would be appreciated

thanks

Answer 1

Try to change this:

$(document).ready(function()
{  $('#navBar > li').bind('mouseover', navBar_open) //mouseover
   $('#navBar > li').bind('mouseout',  navBar_timer)}); //mouseout

To this:

$(document).ready(function() {
    $('#navBar > li').hover(function() {
        closeHoverTimer = window.setTimeout(navBar_open, 500); //500ms timeout);
    }, function() {
        navBar_timer();
        window.clearTimeout(closeHoverTimer);
    });
});

Answer 2

What version of Jquery are you using? If you're using the new one (1.4), you should be able to leverage the new $.delay() function. Then all you'd have to change is one line within navBar_open() to:

ddmenuitem = $(this).find('ul').delay(timeout).css('visibility', 'visible');

Answer 3

this is what you are looking for... click http://cherne.net/brian/resources/jquery.hoverIntent.html

Answer 4

I second Reigel's recommendation to use the hoverIntent plugin. To delay other jquery functions, i tend to use this function:

  var delay = (function(){
    var timer = 0;
    return function(callback, ms){
      clearTimeout (timer);
      timer = setTimeout(callback, ms);
    };
  })();

And call it:

delay (function () {
    // add whatever function you want delayed by 2 secs
}, 2000);

Answer 5

This should work as well:

    $('#navBar > li').hover(
        function() {
            var newthis = $(this);
            timer = setInterval(function() {showTip(newthis)}, delay);
        },
        function() {
            clearInterval(timer);
            $(this).find('ul:visible').fadeOut(speed);
        },
        showTip = function(newthis) {
            clearInterval(timer);
            newthis.find('ul:hidden').fadeIn(speed);
        }
    );