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

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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
August 03, 2010
  1. · Easing jQuery Plug-in: Implementing the Behavior Layer on a Navigation Bar
  2. · Review: the sample navigation barís source code
  3. · Animating the navigation bar's subsections
  4. · Turning the navigation bar into a dynamic interfacing element

print this article

Easing jQuery Plug-in: Implementing the Behavior Layer on a Navigation Bar
(Page 1 of 4 )

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!

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials