Home arrow JavaScript arrow Easing jQuery Plug-in: Using the easeOutBack Effect to Build a Navigation Bar

Easing jQuery Plug-in: Using the easeOutBack Effect to Build a Navigation Bar

In this penultimate installment of the series, I show how simple it is to animate the links bar we've been creating by using the easing options bundled with the Easing plug-in. In this article's example, the animation is implemented via the “easeOutBack” effect, but if you wish, it's quite possible to use a different easing option and create interesting variations in a snap.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
August 16, 2010
  1. · Easing jQuery Plug-in: Using the easeOutBack Effect to Build a Navigation Bar
  2. · Review: building an animated navigation bar with Easing’s easeOutElastic effect
  3. · A subtle navigation bar variation with the easeOutBack easing effect
  4. · Adding the jQuery code to the navigation bar’s markup

print this article

Easing jQuery Plug-in: Using the easeOutBack Effect to Build a Navigation Bar
(Page 1 of 4 )

As you’ll surely know, there are literally dozens of ways to build an animated navigation bar. If you’re not too pretentious and want to keep things rather uncluttered, a simple combination of nested HTML lists and CSS will do the trick quite decently, especially now that CSS-based rollovers are used nearly everywhere. However, if you need to implement more engaging animations, sooner or later you’ll have to appeal to the functionality of JavaScript, or even to what an abstraction library like jQuery can provide.

In a case like this, things can become more complex, since the implementation of a JavaScript-based links bar often seriously compromises its accessibility -- a major sin in the terrain of modern web design. Fortunately, not all is lost when it comes to building animated yet accessible navigation bars. It's possible to get the best of both worlds without going through a painful experience. As the title of this article suggests, there’s a handy jQuery plug-in called Easing, which will let you animate different web page elements, including your carefully-crafted navigational bars, with a minimal effort -- and best of all, without sacrificing their accessibility.

Naturally, if you've already read the tutorials previous to this one, it’s probable that you’re familiar with building an animated links bar using Easing. In those earlier articles I discussed in a step-by-step fashion how to accomplish this. I left off the last installment explaining how to create an interesting variation of the bar by using the “easeOutElastic” effect included with the plug-in, which was admittedly a no-brainer process.

It’s fair to clarify, though, that Easing comes packaged with a few additional eye-catching effects that are worth looking at. In keeping with this idea, in this penultimate part of the series, I’m going to show how to apply the plug-in’s “easeOutBack” animation to the navigation bar developed in the previous article.

Want to learn how this will be carried out? Then jump ahead and begin reading!

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