Plugins

The plugins site is currently in development.

We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.

hoverFlow - A Solution to Animation Queue Buildup


The hoverFlow plugin helps you build smoother hover animations with jQuery.

When creating hover animations (for example navigation bars), you might have come across the problem of animation queue buildup: When you mouseover/-out an element a couple of times, the animation will continue even after you stop moving the mouse. Using the stop()-method is a first answer, but creates unnatural animations.

The hoverFlow plugin honors a single mouseover/-out with a full animation cycle while still preventing animation queue buildup.

A queued animation will only run if it corresponds with the current mouse position at "runtime" (that is, when the animation is dequeued, not when the event was triggered). A mouseover animation will only run if the mouse is currently over the element, and a mouseout animation will only run if the mouse is currently not over the element. Otherwise, the animation queue is empied.

The easiest way to compare the different approaches is to have a look at the plugin homepage. :-)

Downloads



4
Your rating: None Average: 4 (1 vote)