CODEWITHSUNDEEP
jquery
Hailwood
Hailwood

Reputation: 92581

Stop jquery queuing events

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?

Upvotes: 3

Views: 1290

Answers (2)

jAndy
jAndy

Reputation: 236012

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

Upvotes: 6

karim79
karim79

Reputation: 342635

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.

Upvotes: 1

Related Questions