Easing jQuery Plug-in: Implementing the Behavior Layer on a Navigation Bar

Here's a rhetorical question worth asking: why has jQuery become the preferred JavaScript library of so many web designers in the last couple of years? The easy answer is its set of intuitive methods, along with its famous fluent API, make it simple to perform all sorts of clever tasks on web pages, ranging from traversing and manipulating the DOM, to performing Ajax-based HTTP requests and handling CSS styles on the fly.

While it’s fair to admit that jQuery's well-deserved fame comes mainly from the aforementioned features, there’s an additional factor that has contributed to increasing its popularity even further: the core functionality of the library can be quickly expanded by an impressive (and still growing) number of plug-ins. These permit developers to do things “a la carte,” such as increasing the accessibility of user interfaces, paginating database records or extending the range of default animations included with the library.

One of the plug-ins that falls under the latter category is named Easing. It's a handy add-on developed by George Smith that allows developers to create cool easing animations by using Robert Penner’s easing equations. Of course, there are multiple scenarios where this plug-in can be used to build appealing web page animations. One that I found especially interesting, however, is the construction of a dynamic navigation bar. It’s possible to animate its subsections by using some of the easing effects provided by the plug-in, while keeping the bar’s core functionality intact.

To demonstrate how to build an animated navigation bar like the one mentioned above, in the introductory installment of this series I defined the bar’s markup and its visual presentation; this was a straightforward process. With those layers already up and running, the next step is to implement the bar’s dynamic behavior, which will be accomplished with minor effort via the Easing plug-in.

That’s exactly the topic that I plan to cover in this second chapter of the series, so it’s time to continue developing this jQuery-based navigation bar. Let’s go!