Stop jquery queuing events.

Question

So,

I have this demo site up:

http://webspirited.com/ha2/

If you hover over the main header (not in ie). You will notice that the image changes a bit,

This is what i want.

However the keen eye will notice that if you hover on-off-on-off-on-off it will queue the events.

How do i stop it from doing this behavior?

Answer 1

Take a look at this plugin: http://cherne.net/brian/resources/jquery.hoverIntent.html

hoverIntent is a plug-in that attempts to determine the user's intent... like a crystal ball, only with mouse movement! It works like (and was derived from) jQuery's built-in hover. However, instead of immediately calling the onMouseOver function, it waits until the user's mouse slows down enough before making the call.

Answer 2

jQuerys .stop() to the rescue.

$('#element').stop(true, true).animate({});

If you are doing any kind of animation with jQuery, stop() will end the queue. First parameter indicates whether or not to clear the complete queue, second parameter indicates whether or not to jump to the end of the current running animation.

Another option you got here, is to check if the element is currently animated or not and if so, just skip the new .animate method. Example:

$('#element').hover(function(){
   if(!$(this).is(':animated'){  // only go in here if $(this) is NOT animated
      // $(this).animate({});
   }
}, function(){
});

Ref.: .stop(), :animated