Easing jQuery Plug-in: Implementing the Behavior Layer on a Navigation Bar
In this second part of a series, I show how to use the Easing jQuery plug-in to animate the subsections of the navigation bar built in the preceding tutorial. In this case, the easing effect we'll apply to the barís subsection is called ďeaseOutBounce,Ē but itís possible to use others; check the plug-inís official documentation for more information on how to accomplish this.
Easing jQuery Plug-in: Implementing the Behavior Layer on a Navigation Bar (Page 1 of 4 )
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!