A typical Problem with jQuery hover animations is, that they build up the animation queue if the mouse is moved before the animation finished. There are quite a few solutions.

First you can use the excellent hoverIntent plugin and set it’s threshold to be above or equal to the animations duration. Another solution is to use jQuery’s stop() function and reset the elements style. Both of these tend to result in rather unnatural behaviors.

A nicer way to reset animations is implemented in the hoverFlow Plugin, that smoothly resets your animations and prevents the buildup of the animation queue. Thanks to Jürgen Genser for sharing it with me.

Implementing it is really straighforward – you simply replace jQuery’s animate() with hoverFlow(). See a quick example below: