Home arrow JavaScript arrow jQuery Easing Plug-in: Building a Navigation Bar using the easeOutElastic Effect

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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 8
August 10, 2010
  1. · jQuery Easing Plug-in: Building a Navigation Bar using the easeOutElastic Effect
  2. · Review: the source code of the previous navigation bar
  3. · Getting more creative with the Easing plug-in
  4. · Getting the navigation bar up and running

print this article

jQuery Easing Plug-in: Building a Navigation Bar using the easeOutElastic Effect
(Page 1 of 4 )

If you’re in search of a JavaScript package that lets you create eye-catching animations on your web pages without having to leave the comfortable and friendly environment that has made jQuery so popular in the last few years, then you should check out Easing, a handy plug-in that will permit you to achieve this by using something as simple as the library’s “animate()” method.

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.

What’s more, to demonstrate how simple it is to create a bar like this with the Easing plug-in, in previous parts of this series I defined the bar’s structural markup, visual presentation and behavior layer, and finally used the functionality of Progressive Enhancement to make the bar entirely functional even if JavaScript is disabled on the browser.

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!

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-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials