add delay to this jquery on hover

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

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');

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

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);
    });
});

Something like this will do the trick with jquert 1.4 and above. No need for hoverIntent plugin:

$("#yourdiv").hover(function(){
    $(this).stop(true).delay(400).animate({"height":"300px"},800, "easeOutBounce");
},function(){
    $(this).stop(true).animate({"height":"25px"}, 300, "easeOutBack");
});

just add the delay function after the stop element. If you hover over the element it waits 400ms before expanding the menu. If you move the mouse out of the element before the 400ms timeframe the menu will not open.

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);

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);
        }
    );