JQuery: Hover function, how to add a delay...

Question

Hi there,

I have some JQuery that pops up a JQuery Dialog (http://docs.jquery.com/UI/Dialog) box when you hover over an image like so:

 $(document).ready(function() {
     $("img").hover(function() {

          $("#dialog").dialog();
     });
 });

I have 2 questions 1. When i close the dialog and then hover over an image again the dialog dosn't reappear, how can i fix that 1. How can i pop up the box only if the user hovers over the image for a couple of seconds

Answer 1

1 - you need to initialize the dialog first. Code here

$(document).ready( function() { 
  $("#dialog").dialog({ autoOpen: false }); // init without showing

  $("img").bind("mouseover", function() { 
    $("#dialog").dialog('open'); // open the dialog
  }); 

});

2 - just use a counter

var _counter = 0;
var _seconds = 0;

$("img").hover(function() {
    // mouseover
     _counter = setInterval(openDialogNow(), 1000);
}, function() {
    // mouseout
    clearInterval(_counter);
});

function openDialogNow() {
    // this function will run every second while the user does not mouseout the image
    _seconds++; // add 1 to the global variable

    if(_seconds == 3) { // will open in 3 seconds, 3 * 1000 miliseconds
         _seconds = 0;  // reset, so we can reuse later
         $("#dialog").dialog('open'); // open the dialog
    }
}

Answer 2

1) use mouseover/mouseout or mouseenter/mouseleave events.

2) Check out this : http://cherne.net/brian/resources/jquery.hoverIntent.html. I've used in several places and it allows quite nice customization for hovering. It also takes care of point 1 catching its own events.

Answer 3

Look ! A jQuery delay plugin!