JQuery: Hover function, how to add a delay

javascript, jquery

Solution

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

Problem

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

Original source

Related problems