JQuery: Novice to Ninja- P7:No matter what kind of ninja you are—a cooking ninja, a corporate lawyer ninja, or an actual ninja ninja—virtuosity lies in first mastering the basic tools of the trade. Once conquered, it’s then up to the full-fledged ninja to apply that knowledge in creative and inventive ways. | Animating Scrolling and Resizing 67 Now s a great time to try some different easing functions. Just replace the ones used here with any of the others from the easing plugin you ll be amazed at how much difference they make to the feel of the component. You can also try animating other values changing the blob s color for instance. Animated Navigation Take 2 One of the great advantages to using a library such as jQuery is that you can try out a bunch of different alternatives fairly quickly and pick the one you like best. We still have a few hours left before our client will want to see the progress of our animated navigation. Let s try to approach the same problem from a different angle and see what we can come up with. For this animation our menu items will each have a hidden icon that will bounce into view when the link is moused over as shown in Figure . Figure . Bouncy animated menu The setup for this effect is nice and simple. It s a regular unordered list configured as a horizontal menu but we ve stashed a secret icon underneath the normally visible area. This is just a matter of setting the list item s height so that you can only see the link text by default but as we animate the height the icon bounces into view. We ll start with the CSS we ve moved our menu to be absolutely positioned at the top-right of the container div where there s space for the icons to expand. We ve set a background color for the icons to be set against and employed a clever trick to keep the background images out of view notice that the list items are 20px in height but that the background is offset 30px from the top. As a result they ll be invisible until we expand the height of the list items. We ll also set the background image of each link to a different icon 68 jQuery Novice to Ninja chapter_03 10_animated_navigation_2 excerpt container position relative navigation position absolute width inherit top 0 right 0 margin 0 navigation li height 20px float left
