jQuery Easing Plug-in: Building a Navigation Bar using the easeOutElastic Effect
In this fourth part of a six-part series, I show how to create a slightly different version of the previous navigation bar by using the “easeOutElastic” easing effect provided by the Easing plug-in. Achieving this is a straightforward process reduced to calling jQuery’s “animate()” method with the name of the effect to apply.
jQuery Easing Plug-in: Building a Navigation Bar using the easeOutElastic Effect (Page 1 of 4 )
As its name suggests, the plug-in extends the set of easing effects included by default with jQuery, and bases most of its functionality on the easing equations created by Robert Penner. Of course, the seamless integration of Easing with jQuery allows you to animate any web page element with a single method call, which makes it suitable for use in multiple scenarios and situations.
However, one of the most common use cases where Easing really shines is in the construction of a hierarchical navigation bar. It can be utilized to subtly animate the pertinent subsections without ending up with a user interface that resembles the ones built with Flash in the 90s.
So far, this sample navigation bar utilizes the plug-in’s “easeOutBounce” easing to animate its subsections, but it’s possible to switch easily over a few other effects, which are very engaging as well. Therefore, in this fourth installment of the series I’m going to create a subtle variation of the previous links bar, which this time will use a brand new effect, called “easeOutElastic.”
Ready to learn the full details of this redesign process? Then jump forward and read the lines to come!