CODEWITHSUNDEEP
jquerycsshovermousehover
Ross
Ross

Reputation: 17967

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

Upvotes: 2

Views: 4255

Answers (6)

Plippie
Plippie

Reputation: 2886

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.

Upvotes: 1

Mayko
Mayko

Reputation: 439

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

Upvotes: 0

Lyon
Lyon

Reputation: 7364

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

Upvotes: 0

Reigel Gallarde
Reigel Gallarde

Reputation: 65264

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

Upvotes: 1

munch
munch

Reputation: 6321

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

Upvotes: 2

Ropstah
Ropstah

Reputation: 17794

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

Upvotes: 1

Related Questions