delay function call when over an image in jquery

i should start with a little bit of background. i have an image gallery that, when a user hovers over the image, the webpage background is hidden so only the image is shown on the page. once the user exits the image, the background is shown again. i decided to not use jQuery.hover() because there is a DIV on top of the image. so if a user hovers over the image, i can hide the webpage background, but as soon as they hover over the DIV over the image, they are not hovering over the image anymore and the background is shown, even though the mouse is still "over" the image. so that causes some problems. so i thought about tracking the mouse position to determine if the user is over the image.

i am not a javascript or jQuery expert, so if there is some awesome function that will solve all my needs, please forgive me :-) i am still learning and this is part of my learning process.

i am able to get everything wor开发者_Python百科king, but i would really like to set it up so you have to over over the image for 2.5 seconds before the background is removed. this way if someone is just cruising around the site, the background doesn't accidentally get removed and then shown again.

ok, enough chatter, the code...

$(document).mousemove(function(e){
  photo   = $('#photo img.photo');
  offset  = photo.offset();
  width   = photo.width();
  height  = photo.height();

  _left   = offset.left + 5;
  _right  = _left + width;
  _top    = offset.top + 5;
  _bottom = _top + height;

  x = e.pageX;
  y = e.pageY;

  if (x > _left && x < _right && y > _top && y < _bottom) {
    hide_background();
  } else {
    show_background();
  }
});

so, ideally, you would need to hover over the image for 2.5 seconds, then the hide_background() function would be called. if you hover for less than 2.5 seconds, nothing happens. once the mouse exits the image, the background is shown with no delay.

if someone could help me out, it would be much appreciated! thank you!

You may just want to use the hoverIntent plugin.

The "awesome function" that you speak of is some combination of mouseout(), mouseenter() and mouseleave()

Have a look at the documentation: http://api.jquery.com/mouseout/

If you scroll down to the demo, you see it's exactly the situation you're describing.

This can be done using timers, when the mouse is initially moved over the area, it sets off a timer to execute after 2.5 seconds, if the mouse is moved out it will cancel the timer:

var photo   = $('#photo img.photo');
var offset  = photo.offset();
var width   = photo.width();
var height  = photo.height();
var photoTimer = null;
var isShowing = true;

$(document).mousemove(function(e){
  _left   = offset.left + 5;
  _right  = _left + width;
  _top    = offset.top + 5;
  _bottom = _top + height;

  x = e.pageX;
  y = e.pageY;

  if (x > _left && x < _right && y > _top && y < _bottom) {
    if(!photoTimer) {
        photoTimer = setTimeout(function(){
            isShowing = false;
            hide_background();
        }, 2500);
    }
  } else {
    if(photoTimer) {
        clearTimeout(photoTimer);
        photoTimer = null;
    }
    if(!isShowing) {
        show_background();
        isShowing = true;
    }
  }
});

Notes:

• Some of the variables can be cached, to speed up the code that runs on every mouse move.
• I assume the photo is a background image, otherwise use the .hover() function on the specific element, not to catch every mouse move on the document.
• I added a isShowing flag to indicate whether the background is showing or not, so that show_background() shouldn't be called on every mouse move outside the area. If you have code somewhere else that shows/hides the background image, remember to set isShowing accordingly.