How to Make a Smooth Animated Menu with jQuery

Ever seen some excellent jQuery navigation that left you wanting to make one of your own? Today we’ll aim to do just that by building a menu and animate it with some smooth effects. The Goal – One Smooth Menu Here’s a demo of what we’ll end up with by the end. Introduction – An explanation of easing The menu has such a smooth animation because of a thing called “easing”. “The term easing refers to gradual acceleration or deceleration during an animation, which helps your animations appear more realistic. Thanks to the magic of the jQuery Easing plugin, we can now use easing outside of Flash and Actionscript environments. Step 1 – Set up the Structure Before starting with any jQuery, we’ve got to build a quick menu structure with XHTML and load in the required project files. Nothing out of the ordinary here. Then copy in this menu structure into the body: Menu items have a class assigned to it that will designate the color of the block. Step 3 – Style with CSS Step 4 – Animate with jQuery

Quick Tip: Prevent Animation Queue Buildup You've probably stumbled upon a navigation powered by some jQuery effects during your web adventures. Of course you then ran your mouse back and forth over the navigation really fast to watch the animation repeat itself over and over and over again. The natural queuing of animations/effects by jQuery makes the typical animation super easy to code and move on to more important tasks. However, sometimes the animation queue just gets in the way. Here is an example of a navigation that has some effects applied to it via jQuery. Here is the JavaScript that does the effect for the menu: JavaScript: Now let's look at how we can prevent this undesirable behavior. $(document).ready(function(){ $('ul.anim_queue_example2 a') }, function() { });}); Here is the navigation again, using the above JavaScript. As you can see, the animation is no longer queued up by moving your mouse back and forth over the menu items. For more information about the .stop() method, visit the jQuery documentation page.