Question

I built a jQuery component composed of a set of 3 text boxes, laid out against a graphical background div. Hovering each of the boxes swaps the corresponding background graphic related to the box. The animation is done using fadeIn/fadeOut callbacks (fadeIn occurs once fadeOut is done).

The problem I’m experiencing is that a quick pass of the mouse from box #1 to box #3, across box #2, unnecessarily engages the image swap related to box #2, and since the fades are set to smooth, sometimes it takes quite a while before all image swaps are completed. Of course, I’m saying it in the layman’s (unqualified web user) words – jQuery does not know what is ‘unnecessary’. What I really mean is to ask whether there is a way to act smart and – you name it: – queue the events, perhaps flush the ones that didn’t make it on time before new came along, or maybe stopPropagation, or what-not.

I haven’t worked much with events, so excuse my general question. I can provide some sample code if it really helps.

Thanks.

Answer 1

If you provided your HTML and javascript, we could advise much more specifically, but you probably need to add .stop(true) before starting any new animations. This will stop any previous animations and remove them from the animation queue so the next animation can start right away.

For example, instead of this:

$("whatever").fadeIn();

You would do this:

$("whatever").stop(true).fadeIn();

Without the .stop(true), animations can pile up in the queue if the next one starts before the previous one finished which can easily be the case in hover triggered animations.

See jquery doc for more info on .stop().