jquery disable mouseover while waiting on callback

Question

I have a mouseover effect using jquerys animate. The effect makes a div grow in length by * 2 on mouseover and shrink back on mouseleave. This works fine apart from if you move the mouse in and out really quickly - the effect doesnt have time to catch up and so the div just keeps growing.

Is there anyway to disable any further events from firing on an element until the callback is reached?

Answer 1

It just occurred to me that I was, apparently, answering the wrong question. I'm not aware that any method exists to stop further events. I'll leave my original answer below, for the sake of posterity. Plus it might do what you want, if you just wanted the element stop growing/shrinking after rapid mouse-movements.

Without seeing your exact code, I can't say where exactly to put it, but you can use stop():

$('div').mouseOver(
  function(){
    $(this).stop().animate({'width':'200px'},500);
  },
  function(){
    $(this).stop().animate({'width':'100px'},500);
  }
);

That's probably less reliable numbers than you're really using, but that's the idea, anyway. There are almost certainly better ways to achieve this, though.

Demo over at jsbin.